HTML 如何让 div 占据剩余高度

在本文中，我们将介绍如何使用 HTML 和 CSS 让 div 元素占据剩余的高度。

阅读更多：HTML 教程

方法一：使用 flexbox 布局

Flexbox 是一种强大的布局模型，可以帮助我们轻松地实现 div 元素占据剩余高度的效果。下面是一种常见的做法：

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            height: 100%;
        }

        .container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .header {
            background-color: #f1f1f1;
            height: 50px;
        }

        .content {
            background-color: #e6e6e6;
            flex: 1;
        }

        .footer {
            background-color: #f1f1f1;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="content">Content</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

在上面的例子中，我们将整个页面划分为一个包含三个子元素的容器。容器的高度设置为100%，使其占据整个页面的高度。其中，头部（header）和底部（footer）元素的高度固定，中间的内容区域（content）的高度设置为 flex: 1，表示它会占据剩余的高度。

方法二：使用绝对定位

如果你不想使用 flexbox，还可以使用绝对定位的方法实现 div 元素占据剩余高度的效果。下面是一种常见的做法：

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            height: 100%;
        }

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

        .header {
            background-color: #f1f1f1;
            height: 50px;
        }

        .content {
            background-color: #e6e6e6;
            position: absolute;
            top: 50px;
            bottom: 30px;
            width: 100%;
        }

        .footer {
            background-color: #f1f1f1;
            height: 30px;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="content">Content</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

在上面的例子中，我们同样将整个页面划分为一个容器，并设置其高度为100%。头部（header）和底部（footer）元素的高度固定，中间的内容区域（content）使用绝对定位，通过设置 top 和 bottom 的值来占据剩余的高度。

注意事项

以上两种方法均需设置容器的高度为100%。
如果内容区域中存在滚动条，可以为内容区域添加 overflow: auto; 属性，使其可以滚动显示。

总结

本文介绍了两种常见的方法，用于让 div 元素占据剩余的高度。使用 flexbox 布局可以轻松实现这一效果，并且灵活性更强。另外，使用绝对定位的方法也可以达到相同的效果，适用于不支持 flexbox 的旧版浏览器。无论使用哪种方法，都需要注意设置容器的高度为100%。希望本文对你理解和使用这些方法有所帮助。