css不固定高度两栏登高

html-css018

css不固定高度两栏登高,第1张

css不固定高度两栏登高的调整方法是Position：sbsolute；方法，因为父容器相对定位，子元素绝对定位，高度为100%时会自动适应父容器的高度。所以当右侧的高度变化撑起父容器不同的高度时，左侧也会保持一致。

可以通过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等，，，两边设置一致高度，然后右边多出来的内容就会出现一个滚动条，下拉来显示。

还可以设置左右两边高度一致，右边加上禁止溢出。。这样做，如果右边内容多出来了就不会显示出来，，

看你需要哪种，，

因为你使用了float，所以left和right都已经不在正常的流中了，所以他们之间的以及父元素之间的高度都是互相独立的。

所以要想不使用javascript，而又要这两者之间有关系的话就不能使用float。

通常要进行准确的布局都是通过table来解决

参考下，必要的时候给left和right设置宽度

<div id="container" style="display:tablewidth:100%">

<div id="left" style="background-color: reddisplay:table-cell">

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

内容<br>

</div>

<div style="display:table-cell"></div>

<div id="right" style="background-color: bluedisplay:table-cell">内容</div>

</div>