带头部的粘性页脚布局问题：页脚未固定于窗口底部

嘿，我太懂这种用经典负margin方案搞粘性页脚却踩坑的感觉了！你现在的问题主要是因为盒模型的默认样式和高度计算的细节没处理到位，导致页脚没有被正确“拉”到窗口底部，反而跟着内容超出了。

先给你修正一下原来的方案，让它正常工作：

修正后的HTML（结构无需调整，重点优化CSS） #

<div class="header">Header</div>
<div class="content"> 
  Content 
  <div class="push"></div> 
</div>
<div class="footer">Footer</div>

修正后的CSS #

/* 先重置默认边距和盒模型，避免浏览器默认样式干扰高度计算 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow-x: hidden; /* 防止横向溢出影响布局 */
}

.header, .footer {
  height: 75px;
  background: #eee; /* 加背景色方便直观查看效果 */
}

.content {
  min-height: calc(100% - 75px); /* 用calc精准计算内容区最小高度，减去footer高度 */
  margin-bottom: -75px; /* 负margin拉footer上来，抵消push元素的高度 */
  padding: 1rem 0; /* 给内容加内边距，避免被header/footer遮挡 */
}

.push {
  height: 75px; /* 占位元素，防止内容被footer覆盖 */
}

原代码失效的核心原因 #

• 没有重置浏览器默认的margin和padding，body自带的边距会让整体高度超出100%，把页脚挤到窗口外
• min-height: 100%的设置没有考虑footer的高度占比，导致内容区高度计算偏差，负margin的作用没有正确生效

不过说实话，现在更推荐用Flexbox布局做粘性页脚，比旧方案简单太多，几乎不会出错：

现代Flex方案（推荐） #

<!-- HTML结构更简洁，完全不需要push元素！ -->
<div class="page-container">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 用视口高度单位，比100%更适配不同设备 */
}

.header, .footer {
  height: 75px;
  background: #eee;
}

.content {
  flex: 1; /* 让内容区自动填充容器剩余空间，footer会被自动挤到页面底部 */
  padding: 1rem;
}

这个方案不管内容多少，footer都会牢牢固定在窗口底部；如果内容超出窗口高度，页脚会跟着页面滚动到底部，完全不用手动计算高度和负margin，省心又可靠！

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