可以通过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等,,,两边设置一致高度,然后右边多出来的内容就会出现一个滚动条,下拉来显示。
还可以设置左右两边高度一致,右边加上禁止溢出。。这样做,如果右边内容多出来了就不会显示出来,,
看你需要哪种,,
css3 的display:flex可以实现。demo:
html结构
<div class="flex-box">
<div class="col">
<p>左侧内容</p>
</div>
<div class="col">
<p>右侧内容</p><p>右侧内容</p>
</div>
</div>
样式
<style>
.flex-box {
display: -webkit-flex
display: -ms-flexbox
display: flex
overflow: hidden
color:white
}
.flex-box>.col{
flex: 1
padding: 20px
}
.flex-box>.col:first-child {
background: red
-webkit-order: 1
-ms-flex-order: 1
order: 0
}
.flex-box >.col:last-child {
background: black
-webkit-order: 0
-ms-flex-order: 0
order: 1
}
</style>
可以通过js实现两个div自适应同等高度,如下:先设置div+css 基本布局:
<div id="mm">
<div id="mm1">左边</div>
<div id="mm2">右边</div>
</div>
js 实现 div 自适应高度
代码如下:
<script type="text/javascript">
<!--
window.onload=window.onresize=funct {
if document.getElementByIdx_x "mm2" .clientHeight<document.getElementByIdx_x "mm1" .clientHeight {
document.getElementByIdx_x "mm2" .style.height=document.getElementByIdx_x "mm1" .offsetHeight+"px"
}
else{
document.getElementByIdx_x "mm1" .style.height=document.getElementByIdx_x "mm2" .offsetHeight+"px"
}
}
-->
</script>