HTML

Question

我网站的页脚工作不正常，我需要它始终贴在页面底部。

我尝试过的事情：

position:relative：对大多数页面效果最佳，除非最小高度小于某个值，之后我看到这样，页脚下方的空白区域。

position:absolute与bottom:0：虽然页脚始终位于底部，但没有处理内容（因为内容为position:relative），这给了我这样的东西，即页脚不考虑内容高度。

所以我的问题是：在position:relative footer上是否存在始终位于底部的纯CSS方法。

Answer 1

这称为Sticky footer方法。试试这个代码，它适用于所有浏览器。如果是响应式网站，则需要通过断点进行管理

＆＃13;

html,
body {
  height: 100%;
}
html {
  position: relative;
  min-height: 100%;
  padding-bottom: 50px;
  /* equal to footer height */
}
header {
  background: #ccc;
}
footer {
  position: absolute;
  left: 0;
  bottom: 0;
  background: red;
  height: 50px;
  width: 100%;
}

＆＃13;

<header>something</header>
<footer>this will stay at bottom always</footer>

＆＃13;

Answer 2

Flexbox，这应该是你解决这个问题的方法：

HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

CSS

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

将页脚放在底部HTML相对位置

2 个答案:

HTML

CSS