DIV自适应高度

最新推荐文章于 2022-08-22 16:02:30 发布

iteye_17749

最新推荐文章于 2022-08-22 16:02:30 发布

阅读量101

点赞数

分类专栏： CSS 文章标签： CSS QQ 脚本 JavaScript HTML ViewUI

CSS 专栏收录该内容

4 篇文章

订阅专栏

在使用DIV和CSS进行网页布局中，DIV的自适应高度和自适应宽度是一个很常见的问题。
为了保证页面的整体美观性，需要将两个或者多个层的高度/宽度保持一致。

这里有两种常用的解决方案：

[color=red]1.通过javascript脚本来动态的设置每个层的高度/宽度。

2.通过纯CSS来设置属性。[/color]

这里只阐述一下第一种方法：

//脚本代码
<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>