非Flexbox布局下如何让页脚占据页面剩余高度？

嘿，我来帮你搞定这个页脚占满页面剩余空间的问题～你不想改用Flexbox布局完全没问题，咱们用其他方法也能轻松实现，这里有两个实用的方案：

方法一：CSS Grid（首选，易维护） #

CSS Grid不需要你大幅调整现有页面结构，只需要修改body的样式，就能让头部自适应内容高度，页脚自动填满剩余空间，简直是这类布局的最优解。

修改后的完整代码示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        html {
            margin: 0;
            height: 100%;
        }
        body {
            margin: 0;
            text-align: center;
            min-height: 100vh; /* 确保页面至少占满整个视口高度 */
            display: grid;
            grid-template-rows: auto 1fr; /* 第一行（头部）随内容自适应，第二行（页脚）占据所有剩余空间 */
        }
        header {
            /* 保留你原有的头部样式即可，比如下面是示例样式 */
            padding: 1rem;
            background-color: #f0f0f0;
        }
        footer {
            background-color: #003162;
            padding: 5px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 80%;
            /* 删掉你原来设置的height:100%，Grid会自动处理高度 */
        }
        footer a {
            color: #fdb515;
        }
    </style>
</head>
<body>
    <header>
        <!-- 这里放你的头部内容 -->
        页面头部内容
    </header>
    <footer>
        <!-- 这里放你的页脚内容 -->
        页脚内容 <a href="#">示例链接</a>
    </footer>
</body>
</html>

方法二：传统绝对定位方案（兼容旧浏览器） #

如果你需要兼容不支持CSS Grid的老旧浏览器，可以用绝对定位来实现。不过这种方法需要注意头部高度的处理，要是头部高度不固定的话，维护起来会麻烦一点。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        html {
            margin: 0;
            height: 100%;
        }
        body {
            margin: 0;
            text-align: center;
            min-height: 100vh;
            position: relative; /* 为页脚的绝对定位提供参考容器 */
        }
        header {
            padding: 1rem;
            background-color: #f0f0f0;
            /* 如果头部高度固定，可以在这里设置height属性，方便下面计算 */
        }
        footer {
            background-color: #003162;
            padding: 5px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 80%;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            /* 如果头部高度固定，用下面的代码让页脚占满剩余空间 */
            /* min-height: calc(100vh - 头部高度值); */
            /* 比如头部高度是50px，就写成min-height: calc(100vh - 50px); */
        }
        footer a {
            color: #fdb515;
        }
    </style>
</head>
<body>
    <header>
        页面头部内容
    </header>
    <footer>
        页脚内容 <a href="#">示例链接</a>
    </footer>
</body>
</html>

重要提示 #

一定要删掉你原来给footer设置的height:100%，这个属性会强制页脚和body一样高，导致页面出现滚动条或者内容被覆盖，完全不符合你的需求哦～

内容的提问来源于stack exchange，提问作者satish