css - 页脚不在页面底部

Question

我正在制作的网站上的页脚有问题。它不会坐在底部。我知道这是一个常见的抱怨，但我尝试过的一切要么没有工作，要么破坏了其他 CSS 元素。

我已将网站加载到临时域中供您查看。

它在 we-sx.com 上。

我希望页脚位于具有盒子阴影效果的 .container div 下。

score 0 · Accepted Answer

因为你有：

position: absolute;

在“.container”类上

删除它，它应该在 div.container 下

现在这将导致您的 div.container 由于内部的两个浮动元素而崩溃。您将需要针对该问题的 clearfix。您可以将其添加到您的“内容”类中。

.content:after {
  content: "";
  display: table;
  clear: both;
}

score 0 · Accepted Answer

在这里你可以找到一些代码如下

将以下几行 CSS 添加到您的样式表中。.wrapper 中边距的负值与 .footer 和 .push 的高度相同。负边距应始终等于页脚的整个高度（包括您可能添加的任何填充或边框）。

在 CSS 中：

height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

遵循这个 HTML 结构。任何内容都不能位于 .wrapper 和 .footer div 标签之外，除非它是绝对使用 CSS 定位的。.push div 中也不应该有任何内容，因为它是一个隐藏元素，可以“下推”页脚，因此它不会与任何内容重叠。

在 HTML 正文中：

您的网站内容在这里。

  <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2013</p>
    </div>

score -2 · Accepted Answer

这是一个常见问题，我见过的最好的解决方案是：

基本上，您将所有内容放在一个最小高度为 100% 的 div 中，并将页脚 div 推到底部。

3 回答 3