无论视口大小或内容如何，如何将页脚定位到页面底部？答案

【问题标题】：How do I position my footer to the bottom of the page, regardless of the size of viewport or the content?无论视口大小或内容如何，如何将页脚定位到页面底部？
【发布时间】：2015-04-17 16:45:40
【问题描述】：

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

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

这是我的 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%;
}

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

如果我转到“关于”页面，将浏览器窗口的宽度调整为更移动的宽度，然后进入 Chrome 开发人员工具...然后我向下滚动，越过页脚所在（但不应该）所在的位置在页面上，看起来<html>、<body> 和<div class="wrapper"> 元素都在页脚结束的位置结束，即使<section> 内容继续向下。就像内容溢出整个<html> 元素一样，我不知道为什么会发生这种情况。

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

【问题讨论】：

你为什么不在包装类之外尝试
.section-content div 中的所有元素都是浮动的，因此它正在折叠。只需从其直接子级中删除该属性或清除浮动。
@JeanGkol 我认为<div class="wrapper"> 应该环绕整个<body>。
@Marcelo D'oh！这正是错误所在！谢谢，我将我的 clearfix (.clear) 添加到了<div class="section-content">，现在它运行良好。如果你把它写成答案，我可以接受并给你加分。
@Michael 很高兴为您提供帮助。

标签： html css position footer

【解决方案1】：

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

【讨论】：

【解决方案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;
    }
}

【讨论】：