设置height:100%的Div子元素溢出时无法铺满页面底部问题

• 你给html、body设置了固定height: 100%，该属性值是相对于视口高度计算的，会直接将html和body的高度锁定为当前屏幕可见区域的高度，父容器不会随着内部内容高度增加自动延伸。
• .page-content的height: 100%是继承父级body的高度，因此它的高度也被限制为视口高度，当内部子元素高度超过该阈值时，就会出现溢出问题，容器本身不会自动适配子元素高度。

将固定高度属性替换为最小高度属性，保证容器最少占满一屏，同时支持内容撑高容器，参考修改后的CSS代码：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    /* 移除固定height，仅保留最小高度限制，允许父容器随内容延伸 */
    min-height: 100%;
}

.page-content {
    width: 100%;
    border-radius: 10px;
    margin: 10px auto auto;
    padding: 5px;
    /* 替换固定height为min-height，用vh单位直接适配视口高度，减去margin-top避免额外滚动留白 */
    min-height: calc(100vh - 10px);
    background-color: blue;
}

如果需要兼容不支持vh单位的老旧浏览器，也可以给body添加padding-top: 1px避免margin塌陷后，将.page-content的min-height设置为100%即可。

内容的提问来源于stack exchange，提问作者A. Vreeswijk