CSS实现头尾高度固定，中部内容百分百填充_去头尾,中间元素占满高度-CSDN博客

本文介绍了如何使用CSS实现头部和尾部固定，中间内容区域根据屏幕大小百分百填充的响应式布局。这种方法适用于创建适应不同设备的网页设计。

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

效果图：
这里写图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    html {
        height: 100%;
    }

    body {
        height: 100%;
    }

    .container {
        height: 100%;
        position: relative;
    }

    .header {
        height: 50px;
        width: 100%;
        top:0;
        background-color: red;
        position: absolute;
    }

    .content {
        width: 100%;
        background-color: lime;
        top:50px;
        bottom:50px;
        position: absolute;
        overflow: auto;
    }
    footer{
        width:100%;
        height:50px;
        position:absolute;
        bottom:0;
        background-color: red;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            这是标题
        </div>
        <div class="content">
            <h1>diyige</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>nihao</h1>
            <h1>zuihoude</h1>
        </div>
        <footer>
            这是脚注
        </footer>
    </div>
</body>

</html>