Question

我在我正在制作的网站上遇到了页脚问题。它不会坐在底部。我知道这是一个常见的抱怨，但我所尝试的一切都没有奏效或打破其他CSS元素。

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

在we-sx.com上。

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

Answer 1

因为你有：

position: absolute;

上课“.container”

删除它，它应该在div.container

下

现在这会导致你的div.container崩溃，因为里面有两个浮动元素。您将需要针对该问题的clearfix。您可以将其添加到“内容”类中。

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

Answer 2

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

将以下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>

Answer 3

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

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