实现<div>高度最大化的纯css方案

最新推荐文章于 2025-01-01 20:51:13 发布

weixin_30624825

最新推荐文章于 2025-01-01 20:51:13 发布

阅读量285

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/maizhongfei/p/4035676.html

本文介绍了一种在网页布局中动态填充剩余高度的方法，通过CSS技巧实现标题、内容区域的高度自适应，确保页面元素始终充满可用空间。

<html>
<head>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0px;
}

/* this is the big trick*/
#wrapper:before {
    content:'';
    float: left;
    height: 100%;
}
#wrapper {
    height: 100%;
    background-color: black;
    color: white;
}
#header {
    background-color:#000;
}
#content {
    background-color: grey;
}
/* this is the big trick*/
#content:after {
    content:'';
    display: block;
    clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        Title here    
    </div>
    <div id="content">Some content</div>
</div>
</body>
</html>