无法用CSS创建页脚？求响应式底部固定div解决方案

嘿，你的思路其实已经找对方向了，只是还差几个关键的小调整就能实现需求！我来帮你梳理下：

问题分析 #

你已经用了父元素relative+子元素absolute的定位方式，也设置了html和body的高度，但目前的代码里有两个小疏漏：

• 绝对定位的.ground没有设置宽度，默认只会根据内容撑开，没法占满水平宽度
• 父元素.parent用了min-height: 100%，在页面内容为空的情况下，它可能没法完全撑满视口高度

修正后的代码 #

<html>
<head>
    <title>Forget It</title>
    <link rel="stylesheet" href="../static/styles.css">
    <style>
        html {
            height: 100%;
        }
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #96b4ff;
            overflow: hidden; /* 禁止页面滚动 */
        }
        .parent {
            position: relative;
            height: 100%; /* 改为height:100%，强制撑满视口 */
        }
        .ground {
            position: absolute;
            height: 20%;
            bottom: 0;
            left: 0; /* 加上left:0确保对齐左侧 */
            width: 100%; /* 水平占满整个父元素 */
            background-color: #2cb84b;
        }
    </style>
</head>
<body>
    <div class='parent'>
        <div class='ground'></div>
    </div>
</body>
</html>

关键调整说明 #

• 给.ground添加width: 100%和left: 0，确保它从页面左侧延伸到右侧，完全占满水平宽度
• 将.parent的min-height: 100%改为height: 100%，配合html和body的height:100%，让父元素彻底撑满整个视口高度
• 给body添加overflow: hidden，确保页面不会出现滚动条，符合你“页面不可滚动”的需求

这样修改后，你的底部div就能完美适配任何屏幕尺寸，占满水平宽度且垂直高度固定为视口的20%，稳稳固定在页面底部啦！

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