在使用DIV和CSS进行网页布局中，DIV的自适应高度和自适应宽度是一个很常见的问题。
为了保证页面的整体美观性，需要将两个或者多个层的高度/宽度保持一致。
这里有两种常用的解决方案：
1.通过javascript脚本来动态的设置每个层的高度/宽度。
2.通过纯CSS来设置属性。
这里只阐述一下第一种方法：
//脚本代码
<script type="text/javascript">
function initdiv(){
var div1 = document.getElementById("content");
var div2 = document.getElementById("right");
var h1 = div1.clientHeight;
var h2 = div2.clientHeight;
var height;
if(h1>h2)
height=h1;
else
height=h2;
div1.style.height=height+"px";
div2.style.height=height+"px";
}
</script>
//HTML代码片段
<body onload="initdiv();" onresize="initdiv();">
<div id="container">
<div id="header">★Header★<br/>The Header Of The Page</div>
<div align="right"><a href="#">Regist</a> <a href="#">Login</a></div>
<div id="center">
<div id="content"><ul><li>Content1</li><ul><li>Content2</li></ul><ul><li>Content3</li></ul><ul><li>Content4</li></ul></div>
<div id="right">
<li>Left</li>fffffffffffffffffffffffffffffffffffffffffffff
<li>Left</li>ffffffffffffffffffffffffffffffffffff
<li>Left</li>fffffffffffffffffffffffffffff
<li>Left</li>fffffffffffffffffffffffffffffffffffffffffff
<li>Left</li>ffffffffffffffffffffffffffffffffffffffff
<li>Left</li>fffffffffffffffffffffffffffffffffffffffffff
<li>Left</li>fffffffffffffffffffffffffffffffffffffffff
<li>Left</li>fffffffffffffffffffffffffffffff
</div>
</div>
<div id="footer">Made By Jacky<br/>wuhongxian@163.com QQ:68147527</div>
</div>
</body>
分享到：
相关推荐
如何用js加css控制div自适应高度问题完美解决方法
div+CSS自适应高度，需要的朋友请下载
在DIV和CSS进行网页布局中，DIV的自适应高度和自适应宽度是一个很常见的问题，本文将介绍左右自适应高度一致的Jquery与DIV高度自适应屏幕的js
用JS+CSS来实现DIV层自适应高度，无论你的浏览器大小如何变化都会自适应高度， 调节宽度同样的道理
最近做前端设计时需要使左右两个DIV高度自适应。这其中的jquery代码中的获得高度用的clientHeight，介绍一下几种不同的获得方式以及他们的差别
css边框背景阴影 DIV自适应宽度 背景色渐变、透明 多行自适应浏览器高度 圆角div 固定高度div,随内容自动变高css定义方法等等
<div class=A> 头部DIV </div> <div class=B>下部DIV </div> </div> CSS： html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; ...
IE6、IE7、FF下DIV自适应高度
div+css高度自适应div+css高度自适应div+css高度自适应div+css高度自适应
当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。
div+css高度自适应网页布局，子div含float，父div高度自适应，已经通过测试的浏览器：ie6、ie7、ie8、火狐、Chrome。 代码来源： http://www.positioniseverything.net/articles/onetruelayout/equalheight
每当进行页面布局时，我们都有这样的需求，就是当子元素div高度不确定时父div自适应高度，本文整理的多种方法可以解决此问题，感兴趣的朋友可以参考下
最小高度能自适应高度IE.FF全兼容的div设置
div的高度是0，不能随图片的高度变化，那么div如何才能够自适应高度呢？下面有个不错的方法，大家可以尝试下
怎样让一个div高度自适应浏览器高度在应用中很常见，感兴趣的朋友可以参考下哈，希望对你有所帮助