Question

我试图创建一个网站，其中页脚部分位于浏览器的底部，无论页面上有多少内容。

如果一个页面有很多内容，那么它看起来很正常，因为会出现一个滚动条，页脚将是页面的最后一个元素 - 没什么大不了的。但是如果一个页面没有足够的内容来填充浏览器，那么正文部分不会填满浏览器的整个高度，然后它挑战我让页脚位于最底层浏览器。因此，在内容较少的网页上，而不是它：

logo
navigation
content
footer
[[ MASSIVE GAP ]]

然后我希望它去：

logo
navigation
content
[[ MASSIVE GAP ]]
footer

我试图说明这个小提琴中的挑战：https://jsfiddle.net/zmhh3z00/ ......正如你所看到的那样，html-section填充了整个页面 - 但是身体部分只会填充那么多因为内容将成为它。并且我无法在body-element上放置height: 100%; overflow: hidden;，因为这会使滚动条在较长的页面上消失。我尝试在html-section上放置一个position: relative;，然后在页脚部分添加一个position: absolute; bottom: 0px; left: 0; width: 100%，但它有点小故障并且像poo一样工作。页脚不能position: fixed;，因为从上到下可以看到它。

有什么建议吗？

Answer 1

将您的内容div设置为min-height: 100vh;或min-height: 90vh;，它应该可以解决问题。

这会导致您的内容div至少具有整页高度。

Answer 2

您可以添加此css：

.container{
  min-height:100vh
}

或者您可以添加div之类的内容：

 <div class="gap-100"></div>

的CSS：

.gap-100{
  height:100vh
}

Answer 3

基本上，你有一个包含min-height:95 (or 100)vh的div。然后你将页脚绝对放在这个div的底部。

html {background: green;}
body {background: red; border: 1px solid yellow}

.footer  {background: rgba(255,255,255,0.4); border: 1px dashed #000; position: absolute; bottom: 0px; width: 100%;}
.outer {min-height:95vh; position:relative;}

<div class="outer">
<div class="container">
<p>
Main content, where logo and content is.
</p>
</div>
<div class="footer">
<p>
Footer content
</p>
</div>
</div>

你可以在这里找到小提琴：https://jsfiddle.net/xmkx99o3/

Answer 4

很多很棒的答案，但没有人说过将min-height: 100vh; position: absolute;放在身体部分上，这就解决了它。重要的是它不是height: 100vh;，而是它min-height: 100vh;。然后我可以简单地将页脚部分设置为position: absolute; left: 0; bottom: 0; width: 100%;。

然后我找到了页脚的高度，并将其添加为body标签的填充。例如，如果页脚高度为247px，那么我也添加了padding: 0 0 247px 0;和可能margin: 0 0 25px 0;，以便在页面底部留出一个小间隙。

......整个想法不必将所有内容都包含在<div class="outer">或<div class="container">中，这是许多解决方案所建议的内容。

Answer 5

或者利用flex功能，您可以这样做：

body {
  height: 100vh;
  display: flex;
  flex-direction: column
}

footer {
  margin-top: auto;
}

<html>
  <body>
    <main>Some content</main>
    <footer>I am footer</footer>
  </body>
</html>

页面底部的页脚 - 无论内容量多少

5 个答案: