CSS布局：上中下三栏自适应高度

最新推荐文章于 2024-03-08 01:13:26 发布

转载最新推荐文章于 2024-03-08 01:13:26 发布 · 716 阅读

本文介绍了一种使用固定高度的header和footer结合自适应高度的content实现网页满屏显示的方法。通过CSS绝对定位及高度计算，确保了不论浏览器窗口大小如何变化，网页都能保持满屏展示效果。

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

<style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body, html {
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .header {
            background: #C9F;
            width: 100%;
            height: 90px;
            overflow: hidden;
            position: absolute;
            top: 0;
        }
        .content {
            position:absolute;
            top:90px;
            bottom:32px;
            width:100%;
            overflow:hidden;
            height:100%;
        }
        .main {
            height:100%;
            background:#66CCFF;
            overflow-y:auto;
            text-align:center;
        }
        .footer {
            background: #9CF;
            width: 100%;
            height: 40px;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>

<body>
<!-- 代码 开始 -->
<div class="header">
    <br />这里是顶部
</div>
<div class="content">
    <div class="main">
        网页header和footer高度是固定的，中间的content高度自适应浏览器窗口高度，随着窗口的大小变动都是满屏的。
    </div>
</div>
<div class="footer">
    这里是底部
</div>
<!-- 代码 结束 -->
</body>