【Web Trick 6】CSS+DIV 自适应高度

最新推荐文章于 2024-12-10 09:28:22 发布

原创最新推荐文章于 2024-12-10 09:28:22 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

Web Tricks 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用CSS和DIV元素实现网页布局的自适应高度，通过设置百分比和空div来达到意想不到的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在【Web Trick 4】CSS 实现footer固定页面底部中曾经提到过用DOM的盒子

模型结合最小高度来实现footer至于底部，这里扩展一下，以最经典的3段结

构展示一下利用百分数来实现自适应高度。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【Web Trick 6】CSS+DIV 自适应高度</title>
<style type="text/css">
html,body{
    margin: 0;  //覆盖浏览器默认设置
    padding: 0;
    height: 100%;  //必须设置，这个表示body的大小是整个屏幕的大小，后面的百分数的基数是body的值
    background-color: white;
}
#wrap {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
#header {
    height: 13%;
    background-color: green;
}
#middle{
    height: 82%;
    background-color: blue;
}
#middle #sidebar {
    height: 100%;
    width: 20%;
    background-color: pink;
    float: left;
}
#middle #main {
   height: 100%;
    width: 80%;
    background-color: red;
    float: left;
}
#footer {
    height: 5%;
    background-color: black;
}
.clearfloat { //清除浮动
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
</style>
</head>

<body>
    <div id="wrap">
        <div id="header">
        </div>
        <div id="middle">
            <div id="sidebar">
            </div>
            <div id="main">
            </div>
            <br class="clearfloat" />
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

只要给出父级元素的给定宽高，然后用百分数配上空的div可以达