无论视口大小或内容如何，如何将页脚置于页面底部？

Question

我的页脚在我网站的每个页面上都能完美显示，除了我的“关于”页面的移动版本。在我的“关于”页面上，内容（headers、段落等）大于视口的高度，并且由于某种原因，页脚贴在视口的底部，而不是页面的底部.

This is my website's About page. 如果您将浏览器的大小 window 调整为类似于移动设备的宽度，您应该明白我在说什么。

这是我的 HTML 结构（没有内容）：

<!DOCTYPE>
<html>
    <head></head>
    <body>
        <div class="wrapper">
            <header><nav></nav></header>
            <section></section>
            <footer></footer>
        </div>
    </body>
</html>

这里是相关的CSS:

html,
body {
    height: 100%;
}

.wrapper {
    position: relative;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
    height: 40px;
    width: 100%;
}

还有一件我无法解释的奇怪事情正在发生...

如果我转到“关于”页面，将浏览器 window 的宽度调整为更灵活的宽度，然后进入 Chrome 开发人员工具...然后我向下滚动，过去页脚在页面上（但不应该在）的位置，看起来 <html>、<body> 和 <div class="wrapper"> 元素都在页面上页脚结束的位置结束，甚至尽管 <section> 内容继续向下。好像内容溢出了整个<html>元素，我不知道为什么会这样。

另外，我知道 position: fixed 并且它可以很容易地解决这个问题，但我不希望页脚始终在视口中可见。如果页面上的内容占用的空间比视口的高度多 space（需要垂直滚动），我希望用户能够向下滚动然后到达底部的页脚页面，而不是一直在他们面前。

Answer 1

通过检查您的实时网站，您 .about .section-content div 中的所有元素都是浮动的。您可以从它们中删除属性或清除浮动。

Answer 2

我只是将包装器 css 位置更改为绝对位置，并将页脚按要求放在页面底部。

.wrapper {
    position: absolute;
    min-height: 100%;
}

如果这与非移动视图中的内容布局有关，请使用媒体查询。

@media screen and(max-width:480px) {
   .wrapper {
      position: absolute;
      min-height: 100%;
    }
    .about h2, .about p {
         float:none;
    }
}

无论视口大小或内容如何，​​如何将页脚置于页面底部？

How do I position my footer to the bottom of the page, regardless of the size of viewport or the content?

html

css

position

footer

无论视口大小或内容如何，如何将页脚置于页面底部？