页脚的 CSS 问题

Question

所以我有这个简单的页面:

<div class="page-wrapper">
    <div class="page-header">Some navigation stuff goes in here</div>
    <section class="page">The content goes here</section>
</div>

<footer class="page-footer">Guess what this is for?</footer>

我有这个 CSS 可以让页脚贴在页面底部:

html,
body {
  height: 100%;
}

.page-header {
  color: white;
  background-color: #1f1f1f;
  height: 75px;
}

.page {
  margin: 20px 0 0;
}

.page-wrapper {
  min-height: 100%;
  margin-bottom: -340px;
  &:after {
    content: "";
    display: block;
    height: 340px;
  }
}

.page-footer {
  padding: 0;
  margin: 20px 0 0;
  border: 0;
  border-radius: 0;
  color: white;
  text-align: center;
  background-color: #1f1f1f;
  text-align: left;
  height: 340px;
}

为了便于说明，here is a codepen .现在，一切正常，但我的客户要求第二个页脚，但这次它没有出现在所有页面上，它必须在 .page 包装。 Here is a codepen to illustrate this.

如您所见，第二个页脚无法附加到页面底部(主页脚上方)。我已经尝试了很多东西，比如 flexbox 和绝对定位，但我就是无法让它工作。任何人都可以提供任何解决方案吗？再次声明，我无法更改 .view-footer 的位置。

Answer 1

如果你想要以下顺序:

• 标题
• 内容
• 查看页脚
• 页脚

并且您没有所需的特定页面长度，您可以只使用常规的 div(display:block)元素将所有内容一个接一个地放置。

使用 block 可以让每个元素占据屏幕的整个宽度，同时每个元素都出现在前一个元素的下方。

这是一个 fixed version of your codepen .

如果你想让页脚贴在内容的底部(比方说你网站的 .page 部分需要一定的固定高度)，你可以只对页脚使用绝对定位.

这是一个 codepen example为此 :-)