CSS+DIV怎么实现网页左右两栏高度一致？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS+DIV怎么实现网页左右两栏高度一致？相关的知识，希望对你有一定的参考价值。
请问在制作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等，，，两边设置一致高度，然后右边多出来的内容就会出现一个滚动条，下拉来显示。
还可以设置左右两边高度一致，右边加上禁止溢出。。这样做，如果右边内容多出来了就不会显示出来，，
看你需要哪种，，
参考技术A 如果非要这样显示效果的话,而且左边不固定高度的话，我建议左边的背景不要加了，直接加在上一级的背景上。就是
<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;
/**/本回答被提问者采纳 参考技术B 方法一：用js获取右侧div的高度，将这个高度值赋值给左侧的高度
方法二：添加一个父div包含左侧和右侧的div,设置父div的背景颜色为左侧div的颜色，右侧div背景颜色设置为白色 参考技术C 五月五日520回答的方法二比较简单可行。写CSS时候注意将竖直的那条虚线的样式写在右侧白色背景框的样式上，这样虚线条就会跟着高度走了 这样的感觉就是左右高度一样了。 参考技术D 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>
DIV+CSS布局，怎么实现两列高度会一致，其中左例随内容长度而定。
怎么实现两列高度会一致，其中左例随内容长度而定。
类似效果如下列网页网址所示：
http://hunan.news.163.com/08/0731/19/4I73V9MN0055007L.html
左列高度设为height:100%
右列高度设为100%
还应该有个包含左列和右列的主div,也设高为100% 参考技术B 用背景图弥补 在wrap里设置背景图，让左侧和右侧看起来都在自适应增加
<div id="wrap">
<div>左侧</div>
<div>右侧</div>
</div> 参考技术C =.=大哥。你好有趣。CSS目前估计是无法实现你这个功能。
用背景图片来实现吧。 参考技术D 用背景图片
以上是关于CSS+DIV怎么实现网页左右两栏高度一致？的主要内容，如果未能解决你的问题，请参考以下文章