三种Div⾼度⾃适应的⽅法
三种Div⾼度⾃适应的⽅法
DIV⾼度⾃适应，这是在⽹页设计中常遇到的问题，为了给⼤家提供参考，这⾥提供3种div⾼度⾃适应的⽅法：⼀是JS法、⼆是背景图填充法、三是“补丁⼤法”（⽐较变态）。
1、JS法
代码如下。原理：⽤JS判断左右DIV的⾼度，若不⼀致则设为⼀致。
div中的div居中
01<div >
02<div id="right">left</div>
03<div id="left">
04right<br>
05right<br>
06right<br>
07right<br>
08right<br>
09right<br>
10right<br>
11</div>
12</div>
13<script type="text/javascript">
14<!--
15var ElementById("left");
16var ElementById("right");
17if(a.clientHeight<b.clientHeight){
18  a.style.height=b.clientHeight+"px";
19}else{
20  b.style.height=a.clientHeight+"px";
21}
22-->
23</script>
2、背景图填充法
这是⼤站⽤得⽐较多的⽅法，如163等，研究了⼀下，结果如下。
这⾥是给⽗DIV设置了背景图⽚填充，所有DIV都不设⾼度。
HTML代码：
1<div class="endArea">
2<div class="col1">第⼀列　左边正⽂</div>
3<div class="col3">第⼆列　右边<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>字字</div>
4<div class="col2">第三列　中间图⽚</div>
5<div class="clear"></div>
6</div>
CSS代码：
2.16
3/cnews/img07/end_n_bg1.gif); clear:both;}
3、补丁⼤法
就是“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的⽅法。⽐较另类的⽅法，在IE6、IE7、FF3下测试通过。要点：
1、⽗DIV设置　overflow:hidden;
2、对要⾼度⾃适应的DIV设置　padding-bottom:100000px;margin-bottom:-100000px; 两列或多列同理。
代码如下：
01<html>
02<head>
03<meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>
04<title>Div⾼度⾃适应</title>
05<style type="text/css">
06#wrap{overflow:hidden;}
07#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}
08</style>
09</head>
10<body>
11<div id="wrap">
12<div id="sidebar_left">居左</div>
13<div id="sidebar_mid">
14居中<br/>
15居中<br/>
16居中<br/>
17居中<br/>
18居中<br/>
19居中<br/>
20居中<br/>
21</div><div id="sidebar_right">居右</div></div> 22</body>
23</html>
以上三种⽅法都可以解决Div⾼度⾃适应，请根据你⾃⼰的需要，三选⼀。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。