Question

我试图让我的页脚坐在所有内容的底部，无论有多少内容。我尝试了很多不同的方法，但似乎没有一种方法适合我。起初，我让页脚坐在内容的底部，但是页脚下方有“空白”，因为没有足够的内容使页脚到达屏幕的底部。现在，我让它坐在屏幕的底部，但它会与内容交叉，如下所示：

how it looks now

我希望它位于第二行内容之下，但我似乎无法做到这一点，而当内容较少时仍然位于内容的底部。这是一个演示。

对于与内容相交的页脚，请检查here
如果有一些内容，页脚不会到达页面底部，请检查here

这是页脚的CSS：

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

Answer 1

构建HTML代码的方式不正确。现在你有：

<header></header>
<div></div>
<div></div>
<div></div>
<div></div>
<footer></footer>

你需要拥有的是这样的：

<div class="page-wrap">
  <!-- all your DIVs with the main part of your code should be in here -->
</div>
<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

需要此CSS代码才能使粘性页脚起作用：

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -50px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 50px; 
}
.site-footer {
  /*your footer code here*/
}

遵循该结构应该有助于让您的页脚始终保持在底部。示例代码取自CSS Tricks

Answer 2

你想要的是有点棘手，我想我以前遇到过这个问题，不确定我是否正确解决了它。现在我会使用javascript，我知道它不是最佳的，因为你还必须听取身体的大小等。

但它基本上是if / else情况，如果内容大于窗口大小，则为页脚position: relative;，否则需要fixed或absolute位置。请注意，要使relative职位有效，您必须删除float: left;上的<div class ="rows"> ...

另一种选择是使用某种填充，填充空间，并始终保持页脚relative，但这是同样的问题，它必须根据窗口的大小动态计算。

这与中心高度问题非常相似，并不容易弄清楚

Answer 3

您可以尝试使用此浮动页脚解决方案：

由于

Eric Chang

<html> <head> <style> body { margin: 0; padding: 0; } #page { margin: 0; padding: 5; } #footer { display: block; width: 100%; text-align: center; background: black; color: white; bottom: 0; position: fixed; } </style> </head> <body> <div id="page"> Test here <br> </div> <div id="footer"> Footer Here </div> </body> </html>

Answer 4

在第二个示例中，页脚位于浏览器的底部。您在哪个浏览器上收到错误？

如何让我的页脚位于内容的底部？

4 个答案: