Div布局实现Div等高的方法

一、用CSS实现

 

1、通过父Div的边框模拟子Div的背景实现。

 

<%--设置父Div的右边框宽度等于右边Div的宽度--%> <div style="border-right: solid 180px gray;background:black; color: white;"> <div style="width: 180px; float: right; position: relative; right: -180px;"> 右边的 </div> 左边的 <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div style="clear: both; height: 0; overflow: hidden;"> </div> </div>

2、隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现。

 

<style type="text/css"> * { margin:0px; padding:0px; } body { width:900px; height:auto; margin:0px auto; font-size:12px; font-family:Arial; } #header { width:900px; height:100px; background-color:gray; } #content { width:880px; overflow:hidden; padding:3px 10px 0px 10px; margin:0px 0px 3px 0px; } #content-left { width:280px; float:left; background-color:gray; } #content-right { width:590px; float:left; margin-left:5px; background-color:green; } #content-left,#content-right { margin-bottom:-10000px; padding-bottom:10000px; } #footer { width:900px; height:60px; background-color:orange; } </style>

 

 

<div id="header"></div> <div id="content"> <div id="content-left"> <p> left</p> <p> left</p> <p> left</p> <p> left</p> <p> left</p> <p> left</p> <p> left</p> <p> left</p> <p> left</p> <p> left</p> <p> left</p> <p> left</p> <p> left</p> <p> left</p> </div> <div id="content-right"> right</div> </div> <div id="footer"></div>

二、javascript实现

 

<style type="text/css"> #a,#b,#c,#d { width: 185px; float:left; border: 1px solid #96C2F1; margin-right:5px; } </style> <script type="text/javascript"> <!-- function autoHeight() { if (arguments.length > 1) { var x = arguments.length; var elements=[]; for (i=0; i<x; i++) { elements.push(document.getElementById(arguments[i]).scrollHeight); } var max = elements[0]; for(i=0; i<x; i++) { if(max < elements[i]) { max = elements[i]; } } for (i=0; i<x; i++) { document.getElementById(arguments[i]).style.height = max+"px"; } } } //--> </script>

 

<div id="wrap"> <div id="a"> a<br /> a<br /> a<br /> a</div> <div id="b"> a<br /> a<br /> a<br /> a<br /> a</div> <div id="c"> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a</div> <div id="d"> a<br /> a</div> <div style="clear: both;"> </div> </div> <script type="text/javascript"> <!-- window.onload = function() { alert("请先留意没有等高的显示情况/n确定后自动等高处理！"); autoHeight("a","b","c","d"); } //--> </script>