Question

简介

我见过最好的前端开发者制作的很多很棒的网站，但大多数（如果不是全部）网站都有这个问题。什么是最好的跨浏览器技术，将页脚保持在正确的位置？

酷“标题 - 内容 - 页脚”布局：

Layout - OK

Layout - Broken :(

在较小的屏幕上一切都很好，但这在1680x1050或全高清分辨率下非常频繁。

看起来仍然是最好的网站足够长，以适应最大的屏幕（嗯，非常明显）。

这个问题有什么名字吗？我在SO上找不到任何东西，我相信人们之前都在问这个问题。你有任何想法如何处理这个问题，也许有一些我不知道的智能修复，技巧？

谢谢！

Answer 1

我看到这称为“粘性页脚”，并且发布了几种解决方案。

Answer 2

这是一个设计问题，听起来你只是在一个“粘性页脚”之后 - 在这种情况下看一下这个问题：

或直接跳转到链接网站：

在任何情况下，粘性页脚与否（通常不是，对我而言，我不得不说）我通常在我的内容div上使用最小高度，这样真正的短页看起来并不傻。

Answer 3

将css应用于内容部分：

#content{
    min-height:600px;
}

Answer 4

您可以使用绝对定位：

#footer {
  position: absolute;
  width: 100%;
  bottom: 0;
}

或者另一种更复杂的方法是使用 javascript 并将页脚的 margin-top 设置为 body height - all element's height

Answer 5

将页脚设为CSS：

.container {
  position: relative;
}
.footer {
  position: absolute;
  bottom: 0;
}

标记：

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

那将位于底部。如果您想要空格，请在底部添加边距（margin-bottom: xxxpx;）。

Answer 6

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex-grow: 1;
}

<body>
  <div class="content">content</div>
  <footer class="footer">footer</footer>
</body>

假设您要使用尺寸为50px的固定尺寸页脚：

.content {
  min-height: calc(100vh - 50px);
}
.footer {
  height: 50px;
}

<body>
  <div class="content">content</div>
  <footer class="footer">footer</footer>
</body>

Answer 7

表示 100% 的视图高度

<div class="container" style="min-height: 100vh;">
</div>