如何让flex布局下的DIV占满浏览器窗口完整高度而非仅视口高度

解决方案 #

核心修改逻辑 #

你当前代码的问题是根元素、外层容器都设置了固定的height: 100%，该属性只会继承父级的固定高度，当页面内容超过视口高度时，容器不会自动延伸，导致目标div高度仅为视口高度。只需要将固定高度改为最小高度，依赖flex默认的拉伸特性即可实现需求。

修改后的完整CSS代码 #

body, html {
    margin: 0;
    /* 替换原来的height: 100%，保证最小高度为视口高度，内容溢出时自动延伸 */
    min-height: 100vh;
    box-sizing: border-box;
}

/* 全局盒模型适配，避免内边距/边框撑高元素 */
*, *::before, *::after {
    box-sizing: inherit;
}

.main-container {
    display: flex;
    /* 替换原来的height: 100%，容器最小高度占满视口 */
    min-height: 100vh;
}

.full-height-div {
    /* 不需要额外设置height:100%，flex默认align-items: stretch会自动拉满容器高度 */
    /* 可根据需求添加宽度、背景等其他样式 */
}

低版本浏览器兼容方案 #

如果你的项目需要兼容不支持vh单位的极低版本浏览器，可改用以下写法：

html, body {
    margin: 0;
    height: 100%;
}
.main-container {
    display: flex;
    min-height: 100%;
}

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