如何不使用absolute属性将footer元素定位到页面底部？

下面介绍两种无需依赖position: absolute的可靠方案，适配各种页面内容长度：

方法1：Flexbox布局 #

这是目前最简洁也最推荐的方案，完全不需要依赖footer的固定高度——内容不足时footer自动贴底，内容过长时footer被推到页面最下方。

HTML结构 #

<body>
  <header>页面头部</header>
  <main>页面主要内容</main>
  <footer>页面底部Footer</footer>
</body>

CSS代码 #

body {
  margin: 0;
  min-height: 100vh; /* 让body高度至少占满整个视口 */
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}

main {
  flex: 1; /* 让main占据剩余所有可用空间，把footer挤到底部 */
}

header, footer {
  padding: 1rem;
  background: #f5f5f5;
}

方法2：CSS Grid布局 #

Grid布局逻辑清晰直观，同样能轻松实现需求：

HTML结构 #

和Flexbox方案的HTML结构完全一致

CSS代码 #

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto; /* 头部高度自适应，main占剩余空间，footer高度自适应 */
}

header, footer {
  padding: 1rem;
  background: #f5f5f5;
}

补充说明 #

• 两种方案都不需要提前知道footer的高度，自适应能力强
• 务必将body的margin设为0，避免默认边距导致页面出现滚动条或留白
• 如果页面有额外的外层容器（比如.wrapper），也可以把布局属性应用到这个容器上，效果一致

内容的提问来源于stack exchange，提问作者Rishi Kumar Jha