如何防止footer占用过多高度？附标准页面布局及CSS代码

我来帮你搞定这个footer高度的问题！你现在的需求应该是让footer在页面内容不足时贴在页面底部，同时只占用自身需要的高度（而不是强行占满剩余空间），但目前的CSS设置导致footer高度超标了。咱们用Flexbox就能轻松解决这个问题，这也是当前布局这类需求的最佳实践。

核心思路 #

把body设置成垂直方向的Flex容器，让main区域自动填充header之后的剩余空间，footer就只会占用它自身内容需要的高度，同时在内容不够时被推到页面底部。

完整代码示例 #

<header> 
  <div id="banner"> Header </div> 
</header> 
<div id="main">Content</div> 
<footer>
  <a href='#'>Terms of Service</a>
</footer>

html {
  height: 100%;
  box-sizing: border-box; /* 避免内边距/边框撑大元素 */
}
*, *::before, *::after {
  box-sizing: inherit;
}
body {
  margin: 0;
  text-align: center;
  height: 100%;
  display: flex; /* 把body变成flex容器 */
  flex-direction: column; /* 子元素垂直排列 */
}
#main {
  flex: 1; /* 让main自动填充header和footer之外的剩余空间 */
}
footer {
  background-color: #003162;
  padding: 5px;
  /* 这里不用额外设置高度，footer会自适应内容 */
}

关键属性解释 #

• display: flex + flex-direction: column：让body的子元素（header、main、footer）垂直排列，并且可以利用flex属性分配空间。
• flex: 1：给#main设置这个属性后，它会自动占据header之后、footer之前的所有可用空间，footer就只会保留自身内容需要的高度，不会过度占用空间。
• box-sizing: border-box：避免padding或者边框导致元素总尺寸超出预期，让布局更稳定。

这样调整后，footer就不会再占用过多高度，同时完美实现“内容不足时贴底，内容足够时跟随”的效果啦！

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