在使用DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题。 为了保证页面的整体美观性,需要将两个或者多个层的高度/宽度保持一致。 这里有两种常用的解决方案: 1.通过javascript脚本来动态的设置每个层的高度/宽度。 2.通过纯CSS来设置属性。 这里只阐述一下第一种方法: //脚本代码 <mce: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"; } // --></mce:script> //HTML代码片段 <body οnlοad="initdiv();" οnresize="initdiv();"> <div id="container"> <div id="header">★Header★<br/>The Header Of The Page</div> <div align="right"><a href="#" mce_href="#">Regist</a> <a href="#" mce_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>