CSS+DIV怎么实现网页左右两栏高度一致?

html-css011

CSS+DIV怎么实现网页左右两栏高度一致?,第1张

可以通过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>