Question

今天，我一直在尝试制定一个页脚，我一直在尝试通过CSS来完成此操作，但是无论我如何尝试，它都不会移到最底层。这是我目前所拥有的：

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: red;
}

<div id="footer">
  <p>TEST TEKST</p>
</div>

这是结果：

Answer 1

尝试一下

body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 50px;
}

<body>
  <div id="footer"></div>
</body>

Answer 2

绝对位置始终取决于其祖先（相对位置），但是如果没有祖先，则使用文档正文，并随页面滚动一起移动。

尝试将div＃footer直接放在体内

<body>
  <div id="footer">
    <p>
      TEST TEKST
    </p>
  </div>
</body>

，还向您的CSS添加left属性，以防止其与祖先重叠

#footer{
  position: absolute;
  bottom: 0;
  left: 0;    //<----
  width: 100%;
  height: 60px;
  background-color:   red;
}

Answer 3

在页脚之前您没有任何内容，因此DOM仅包含一个元素，即页脚，因此bottom：0px不会起作用。如果您在DOM中只有一个元素，并且希望其位置相对于窗口大小，请尝试根据窗口大小在“ vh”中提供值以固定其位置。这是更新的代码段。希望这就是您要寻找的

#footer {
  position: relative;
  bottom: 0px;
  width: 100%;
  height: 60px;
  background-color: red;
  margin-top: 100vh;
}

<div id="footer">
  <p>TEST TEKST</p>
</div>

Answer 4

也将HTML高度增加了100％

html, body {
  min-height: 100%;
}

另外，您可以将页脚显示为：fixed;因此它始终位于页面底部（如果页面具有滚动条）。

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: red;
}

最后，为了获得最佳实践，请将页脚从ID更改为Class。（在CSS中，将＃更改为。）。

Answer 5

没有看到整个html很难确定，但是您需要声明height：正文和html的高度为100％，页脚也可能位于具有position：relative;的元素内。意味着您的页脚将定位到该元素的底部。

html, body {
  min-height: 100%;
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: red;
}

<div id="footer">
  <p>TEST TEKST</p>
</div>

页脚未移至页面底部

5 个答案: