CSS两列等高，如http:www.jsshuntai.comprolist.asp?id=183&categoryID=183

html-css012

CSS两列等高，如http:www.jsshuntai.comprolist.asp?id=183&categoryID=183,第1张

把框架改成表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

body{width:960px}

.container{border:2px solid purple}

.mainContent{ margin:0 260pxborder:2px dashed redcolor:redwidth:40%}

.sidebar1{background-image:url(../images/sidebar1Back.gif)width:30%height:100%border:1px dashed red}

.sidebar2{border:1px double blue}

.clearfloat{clear:both}

.footer{border:1px dashed purple}

</style>

</head>

<body>

<center>

<table width="960">

<tr>

<td class="sidebar1">

<table><td>sidebar1</td></table>

</td>

<td class="mainContent">

<table><td>mainContent</td></table>

</td>

<td class="sidebar2">

<table><td>sidebar2</td></table>

</td>

</tr>

</table>

</center>

</body>

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

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

看你需要哪种，，

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