如何解决短内容页面footer无法固定在页面底部的问题

你之前使用position: fixed的问题在于，fixed是相对于浏览器视口定位，页面内容高度超过视口时，页脚会固定悬浮在底部遮挡内容，就是你截图中遇到的问题。使用Flex布局实现粘性页脚即可完美解决该问题，修改步骤如下：

1. 给body设置最小高度为全屏高度，开启flex纵向布局

body {
  margin: 0; /* 清除浏览器默认边距 */
  min-height: 100vh; /* 最小高度等于视口高度 */
  display: flex;
  flex-direction: column;
}

2. 让main区域自动填充body的剩余空间

main {
  flex-grow: 1; /* 占满header和footer之外的所有可用空间 */
}

3. 移除footer的fixed定位相关属性，保留需要的边距即可

/* Contact Footer */
.contact-footer {
  margin: 10px 0;
  text-align: center;
}

方案效果 #

• 页面内容不足一屏时，页脚自动固定在视口最底部
• 页面内容超过一屏时，页脚跟随内容排在整个页面的最底部，不会遮挡任何内容
• 纯CSS实现，无额外JS依赖，兼容所有现代浏览器

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