css不固定高度两栏登高

html-css020

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

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

看你需要哪种，，