CSS+DIV怎么实现网页左右两栏高度一致?
发布网友
发布时间：2022-05-12 19:45
共7个回答
热心网友
时间：2022-05-12 21:14
可以通过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等，，，两边设置一致高度，然后右边多出来的内容就会出现一个滚动条，下拉来显示。
还可以设置左右两边高度一致，右边加上禁止溢出。。这样做，如果右边内容多出来了就不会显示出来，，
看你需要哪种，，
热心网友
时间：2022-05-12 22:32
就是
<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;
}
}
/**/
热心网友
时间：2022-05-13 00:07
方法二：添加一个父div包含左侧和右侧的div,设置父div的背景颜色为左侧div的颜色，右侧div背景颜色设置为白色
热心网友
时间：2022-05-13 01:58
热心网友
时间：2022-05-13 04:06
<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>
热心网友
时间：2022-05-13 06:31
