CSS+DIV怎么实现网页左右两栏高度一致？
请问在制作HTML网页时，怎么实现左右两栏的告诉一致？我做了一个简单的左右两栏的页面，左侧是导航或者标题栏，右侧是内容栏，但是右侧内容经常多余左侧，导致左右高度不一样，请...
请问在制作HTML网页时，怎么实现左右两栏的告诉一致？
我做了一个简单的左右两栏的页面，左侧是导航或者标题栏，右侧是内容栏，但是右侧内容经常多余左侧，导致左右高度不一样，请问怎么实现左侧随右侧高度增加而增加？
问题图如下，求解：
希望实现后的效果图： 展开
我做了一个简单的左右两栏的页面，左侧是导航或者标题栏，右侧是内容栏，但是右侧内容经常多余左侧，导致左右高度不一样，请问怎么实现左侧随右侧高度增加而增加？
问题图如下，求解：
希望实现后的效果图： 展开
展开全部
可以通过JQ来获取右边高度再付值给左边。这样，右边内容再多，JQ也能把它的高度付值给左边，这样就会两边一样。
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
//判断控制页面初始时左右的高度一致
var hl = $(".left").outerHeight(); //获取左侧left层的高度
var hr = $(".right").outerHeight(); //获取右侧right层的高度
var mh = Math.max(hl,hr); //比较hl与hr的高度，并将最大值赋给变量mh
$(".left").height(mh); //将left层高度设为最大高度mh
$(".right").height(mh); //将right层高度设为最大高度
</script>
还可以通过一些滚动插件：比如jQuery Scrollbars等，，，两边设置一致高度，然后右边多出来的内容就会出现一个滚动条，下拉来显示。
还可以设置左右两边高度一致，右边加上禁止溢出。。这样做，如果右边内容多出来了就不会显示出来，，
看你需要哪种，，
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果非要这样显示效果的话,而且左边不固定高度的话，我建议左边的背景不要加了，直接加在上一级的背景上。
就是
<style>
.main{
height:auto;
background:url(灰色横条.JPG) repeat-y;
｝
.left{
float:left;
width:180px;
height:auto;
}
.right{
float:left;
width:820px;
height:auto;
}
.clear{
clear:both;
}
</style>
<div class=“main”>
<div class="left">
</div>
<div class="right">
</div>
<div class="clear">
</div>
</div>
二是：
固定好左边的高度，定位好。
三是：
用JS控制将左边和右边的高度相等
还有一种，之前在网上看的
最经典的两列自适应高度CSS代码，IE5、6、7，FF下测试通过。希望对你有用：
body{
padding: 0;
margin: 0;
color:#333/*#0d7206*/;
font-size: 14.7px;
font-family: Arial, Helvetica, sans-serif;
line-height: 140%;
text-align: center;
background:url(body_bg.jpg) #c8fdcc repeat-x top left;}
#pagebody{
width: 760px;
margin:10px auto;
overflow: hidden;
}
#sidebar{
border-right:1px #009900 dotted;
width: 199px; float: left;
background:url(l_bg_contbox.png) #FFF repeat-y left;
text-align: left;
}
#mainbody{
width: 560px;
float: left;
background:url(r_bg_contbox.png) /*#f6f6f6*/#fff repeat-y right; text-align: left;}/* easy clearing */
#pagebody:after {
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#pagebody {
display: inline-block;
}
/*\*/
#pagebody {
display: block;
}
/* end easy clearing */
/*\*/
#sidebar, #mainbody {
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#sidebar, #mainbody {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#sidebar:before, #mainbody:before {
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/**/
就是
<style>
.main{
height:auto;
background:url(灰色横条.JPG) repeat-y;
｝
.left{
float:left;
width:180px;
height:auto;
}
.right{
float:left;
width:820px;
height:auto;
}
.clear{
clear:both;
}
</style>
<div class=“main”>
<div class="left">
</div>
<div class="right">
</div>
<div class="clear">
</div>
</div>
二是：
固定好左边的高度，定位好。
三是：
用JS控制将左边和右边的高度相等
还有一种，之前在网上看的
最经典的两列自适应高度CSS代码，IE5、6、7，FF下测试通过。希望对你有用：
body{
padding: 0;
margin: 0;
color:#333/*#0d7206*/;
font-size: 14.7px;
font-family: Arial, Helvetica, sans-serif;
line-height: 140%;
text-align: center;
background:url(body_bg.jpg) #c8fdcc repeat-x top left;}
#pagebody{
width: 760px;
margin:10px auto;
overflow: hidden;
}
#sidebar{
border-right:1px #009900 dotted;
width: 199px; float: left;
background:url(l_bg_contbox.png) #FFF repeat-y left;
text-align: left;
}
#mainbody{
width: 560px;
float: left;
background:url(r_bg_contbox.png) /*#f6f6f6*/#fff repeat-y right; text-align: left;}/* easy clearing */
#pagebody:after {
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#pagebody {
display: inline-block;
}
/*\*/
#pagebody {
display: block;
}
/* end easy clearing */
/*\*/
#sidebar, #mainbody {
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#sidebar, #mainbody {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#sidebar:before, #mainbody:before {
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/**/
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
方法一：用js获取右侧div的高度，将这个高度值赋值给左侧的高度
方法二：添加一个父div包含左侧和右侧的div,设置父div的背景颜色为左侧div的颜色，右侧div背景颜色设置为白色
方法二：添加一个父div包含左侧和右侧的div,设置父div的背景颜色为左侧div的颜色，右侧div背景颜色设置为白色
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
五月五日520回答的方法二比较简单可行。写CSS时候注意将竖直的那条虚线的样式写在右侧白色背景框的样式上，这样虚线条就会跟着高度走了 这样的感觉就是左右高度一样了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
CSS+DIV实现网页左右两栏高度一致，首先我们需要理解div是一个块级元素，我们可以通过设置一样的高度和宽度来实现的，然后在通过一个flaot属性来设置好这个2个元素的左右对齐，最好在加个边框，便于观察，具体可以看下代码：
<html>
<head>
<style>
#div2{
widht:220px;
height:300px;
font-size:13px;
}
#div3{
width:100px;
height:80px;
flaot:left;
margin-left:20px;
border:1px solid #f00;
}
#div4{
width:100px;
height:80px;
flaot:left;
border:1px solid #f00;
}
</style>
</head>
<body>
<div id='div2'>
<div id='div3'>
<p>我是测试文字</p>
</div>
<div id='div4'>
<p>我是测试文字</p>
</div>
</div>
</body>
</html>
<html>
<head>
<style>
#div2{
widht:220px;
height:300px;
font-size:13px;
}
#div3{
width:100px;
height:80px;
flaot:left;
margin-left:20px;
border:1px solid #f00;
}
#div4{
width:100px;
height:80px;
flaot:left;
border:1px solid #f00;
}
</style>
</head>
<body>
<div id='div2'>
<div id='div3'>
<p>我是测试文字</p>
</div>
<div id='div4'>
<p>我是测试文字</p>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
