Flex布局中如何让元素占满剩余空间且设置最小高度

你的问题核心是固定视口内的Header+内容区布局与Footer滚动可见的冲突，根源在于body/html和section的高度设置限制了页面的自然扩展，导致Footer无法被正常推到内容区下方。

解决方案代码 #

修改后的CSS如下：

body, html {
  margin: 0; /* 清除默认边距，避免布局偏移 */
  min-height: 100%; /* 改为min-height，允许页面随内容自动扩展 */
}

section {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 使用100vh确保section至少占满整个视口高度 */
}

header {
  border:1px solid red;
}

footer {
  border: 1px solid blue;
  background-color:blue;
}

div {
  background-color:#eee;
  flex: 1; /* 自动填充section的剩余空间 */
  min-height:200px; /* 保证内容区最小高度 */
}

HTML结构保持不变：

<section>
  <header>header</header>
  <div>content</div>
</section>

<footer>footer</footer>

关键修改说明 #

1. body/html改用min-height:100%：
   原来的height:100%会强制页面高度固定为视口高度，当内容（Header+内容区）超过视口时，Footer无法被正常推到页面底部，只能覆盖在内容区上方。改用min-height后，页面高度会随内容自动扩展，Footer自然排在内容区之后。

2. section改用min-height:100vh：
   100vh是视口高度单位，确保section至少占满整个窗口高度——当内容区高度不足时，flex:1会让div自动撑满剩余空间；当内容区因min-height:200px超过视口高度时，section会自动拉长，Footer不会重叠。

3. 清除默认边距：
   浏览器默认的body边距会导致布局出现不必要的空白或滚动条，直接清除即可。

这样修改后，Header和内容区会始终占满视口（或在内容不足时撑满），Footer默认处于视口下方，滚动页面即可看到，且完全不会与内容区重叠。

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