页脚不粘在底部

Question

简而言之：我找不到将页脚放在页面底部的方法。

我试着只依靠 html:

<footer></footer>

我尝试使用 bootstrap ui 的 class:

<div class="modal-footer">

或

<div id="footer">
   <div class="container">
    ...
</div>

但什么都没有...它似乎不起作用...

Answer 1

html, body {
  height: 100%;
}

.modal-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

我在页面的头部添加了一些 css。首先，如果你检查页面，正文的长度只有页面的一半。所以我们必须给它 100% 的高度，这样它就可以占据整个页面。

其次，要将页脚放在页面底部，我们需要将其定位为 absolute 以便它与第一个定位的父级对齐（在本例中为 none，因为我们没有指定任何其他元素的位置），然后您可以将 bottom 指定为 0，以便它粘在底部。

这是我们将页脚放在底部的正常方式。您可以检查 bootstrap 是否有内置的东西。

希望对您有所帮助。

Footer does not stick to the bottom