制作粘性页脚

Question

我正在尝试制作一个粘性页脚，但似乎不太正确。如果不显示一些屏幕截图和一些 css，我真的不知道如何描述这一点。这里是。

现在我的页脚似乎已修复，因为它会覆盖内容，但我没有 fixed position 设置它。这是发生的情况的屏幕截图

我显然希望页脚被内容压下。这是页脚和容器的 css：

页脚 CSS

.footer {
  height: 40px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
}

集装箱

body {
  color: $base-text-color;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: $base-background-color;
}

.container {
  max-width: 1200px;
  margin: 18px auto 0;
  text-align: center;
  min-height: 100%;
}

申请HTML

<body>
  <%= render 'shared/top_bar' %>
  <div class="container">
    <%= render 'shared/errors' %>
    <%= yield %>
  </div>
  <%= render 'shared/footer' %>
</body>

希望这些信息足够了。感谢您的帮助！

Answer 1

这里有几个问题：

不给容器 min-height 的 100%;
不给身高100%;

给出页脚的容器position:relative; 并养成总是给定位绝对元素的父元素 "position:relative";

的习惯

body {
 color: red;
 margin: 0;
 padding: 0;
 background-color:pink;
 border :  6px solid black;
 position:relative;
}

.container {
  max-width: 1200px;
  margin: 18px auto 0;
  text-align: center;
}

.footer {
  height: 40px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
}

Answer 2

您的 body 没有填满屏幕。您可以这样设置：

body{ min-height: 100vh; position:relative;}

Answer 3

使用给定的代码，我会这样做，我将 container 设置为完整视口高度，从中减去边距和页脚高度，并降低绝对位置。

这将在内容较小时将页脚保留在底部，当内容变大时将其向下推。

也可以使用 flexbox，但只要知道页脚的高度，这是最简单的并且跨浏览器工作得很好。

html, body {
  color: blue;
  margin: 0;
  background-color: lightgray;
}
.container {
  max-width: 1200px;
  margin: 18px auto 0;
  text-align: center;
  min-height: calc(100vh - 18px - 40px);
}
.footer {
  height: 40px;
  width: 100%;
  text-align: center;
  background: lightblue;
}

  <div class="container">
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
    Container<br>
  </div>
  <div class="footer">
    Footer
  </div>

制作粘性页脚

Making a sticky footer

html

css

sticky-footer

页脚 CSS

集装箱

申请HTML