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

时间：2014-10-13 20:51:19

标签： html css

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

how it looks now

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

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

这是页脚的CSS：

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

4 个答案:

答案 0 :(得分：2)

构建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

答案 1 :(得分：1)

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

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

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

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

答案 2 :(得分：1)

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

由于

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>

答案 3 :(得分：0)

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

相关问题
最新问题