HTML 高度自适应布局

最新推荐文章于 2024-08-14 19:32:44 发布

稚枭天卓

最新推荐文章于 2024-08-14 19:32:44 发布

阅读量6.2k

点赞数

分类专栏： CSS 教程前台技术文章标签： height absolute static position

本文链接：https://blog.csdn.net/u013630349/article/details/52527440

版权

前台技术同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

CSS 教程

13 篇文章 0 订阅

订阅专栏

定义：高度自适应表示，在浏览器窗口边界变化，或在浏览器显示比例调整，这一过程中，浏览器中元素随着上述变化而自适应改变 height 属性值的特性。

原理：当一个元素是绝对定位时，如果没有给它设定高度或宽度，则它的的高度和宽度是由它的 top、right、bottom、left 属性决定的，换言之，自身的属性是由自身周围周围的绝对布局元素决定的。这样，就可以实现元素的高度和宽度自适应布局了。

实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自适应布局</title>
<style>
html,body{ height:100%;}
body,div{ margin:0; padding:0; color:#F00;}
* html{ padding-top:100px;}/*for ie6*/
.top{ background:#36C; height:100px;}
* html .top{ background:#36C; height:100px; position:absolute; top:0; width:100%;}/*for ie6*/
.main{ background:#F90; position:absolute; width:100%; top:100px; bottom:0; overflow:auto;}
* html .main{ background:#F90; position:static; height:100%;}/*for ie6*/
</style>
</head>
<body>
<div class="top">我是top，固定高度</div>
<div class="main">我是main，高度随浏览器大小变化而变化<p style="height:500px;"></p></div>
</body>
</html>

效果：

w3c