如何在 HTML 中创建粘性页脚？

如何确保页脚固定在页面底部

在 HTML 页面中，通常希望有一个固定的页脚保留在页面底部页面底部，无论内容长度如何。然而，有时，样式问题可能会阻止页脚元素占据整个页面宽度或在其下方留下空白。

为了解决此问题，一种流行的解决方案是“粘性页脚”技术。此方法涉及创建一个包含正文内容的包装元素和一个与页脚高度相同的推送元素。

通过将包装元素的底部边距设置为等于页脚高度的负值，推送元素是被推到页面底部。这会强制页脚粘在底部边缘，无论页面长度如何。

为了说明这一点，请考虑以下 CSS 代码：

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

HTML 结构：

<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>

通过实现这种粘性页脚方法，您可以确保页脚元素保持固定在页面底部，填充整个页面宽度并消除不需要的白色空间。

以上是如何在 HTML 中创建粘性页脚？的详细内容。更多信息请关注PHP中文网其他相关文章！