如何填充网页剩余空白区域？已尝试height:100%等方法无效

嘿，我来帮你搞定这个烦恼！不用加一堆多余文本，用现代CSS布局就能轻松让footer牢牢粘在页面底部，同时填满中间的空白区域。下面给你几种最实用的方案：

方法一：Flexbox布局（推荐） #

这是目前最简洁高效的方式，兼容性也很好：

<html>
<head>
<style>
/* 先重置默认边距，避免浏览器自带样式干扰 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
/* 把body设为flex容器，垂直排列子元素 */
body {
  display: flex;
  flex-direction: column;
}
/* 让article占据所有剩余空间，自动填充空白 */
article {
  flex: 1;
}
/* 给footer加个背景方便看效果，可按需调整 */
footer {
  background-color: #f5f5f5;
  padding: 1.5rem;
}
</style>
</head>
<body>
<article>你的个人网页内容</article>
<footer>页脚信息</footer>
</body>
</html>

原理：flex:1会让article自动填充body中除了footer之外的所有可用空间，不管你的内容多短，footer都会被推到页面最底部，完美消除中间的空白。

方法二：Grid布局（更简洁） #

如果你喜欢更直观的网格布局，这个方案也很赞：

<html>
<head>
<style>
body {
  /* 让body至少占满整个视口高度 */
  min-height: 100vh;
  margin: 0;
  padding: 0;
  /* 把页面分成两行：第一行占剩余空间，第二行自适应footer高度 */
  display: grid;
  grid-template-rows: 1fr auto;
}
footer {
  background-color: #f5f5f5;
  padding: 1.5rem;
}
</style>
</head>
<body>
<article>你的个人网页内容</article>
<footer>页脚信息</footer>
</body>
</html>

原理：grid-template-rows: 1fr auto直接定义了页面的行结构，1fr代表“剩余空间”，auto则是footer自身的高度，一步到位解决问题。

方法三：传统绝对定位法（兼容旧浏览器） #

如果需要支持非常老旧的浏览器，可以用这个方案：

<html>
<head>
<style>
body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  /* 为绝对定位的footer提供参考 */
  position: relative;
}
/* 给article加底部内边距，避免内容被footer覆盖 */
article {
  padding-bottom: 6rem; /* 值要等于footer的总高度（高度+内边距） */
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4rem; /* 固定footer高度 */
  padding: 1rem;
  background-color: #f5f5f5;
  box-sizing: border-box; /* 让内边距包含在高度内，避免宽度溢出 */
}
</style>
</head>
<body>
<article>你的个人网页内容</article>
<footer>页脚信息</footer>
</body>
</html>

注意：这个方法需要手动计算footer的高度，并设置article的padding-bottom，不如前两种灵活，但兼容性更好。

额外提示 #

记得检查你原来的代码中是否有给article或footer设置了多余的margin，浏览器默认的元素边距也可能导致空白，所以重置html和body的margin、padding是很重要的一步。

内容的提问来源于stack exchange，提问作者K.Hazell