Question

我正在尝试将页脚放在#cont下，但位于#container内。我尝试制作它，以便当#content中有更多内容时，它会将footer保留在div内，并允许我滚动页面，但我迷路了。知道我应该怎么做吗？

正如您所看到的，更多内容会将其推下来（因为它不在其他div中，但如果它不在内部，我无法将页脚设置为始终位于页面底部）

Answer 1

您可以将浮动元素更改为display: inline-block,，以便您可以更好地控制它们，容器将适应它们的高度。

#footer {
  background-color:#FFA500;
  text-align:center;
  max-width:960px;
  width: 100%;
}

示例：http://jsfiddle.net/frapporti/TPbCG/

编辑：总的来说，我真的很乐意建议你不要使用浮动元素进行布局，因为它们从一开始就超出了它们原来的预期用途，现在我们有flex做魔法的人:)

Answer 2

如果我理解你想要达到的目的，那么这是一种方法：

http://jsfiddle.net/a9jv7/1/

在#container上添加：

border-bottom:30px solid transparent; // used to add spacing bottom
margin-bottom:-30px; // used to add spacing bottom
overflow:hidden; // to give the container height, because it has none since the elements inside it are float-ed; (google clear-float).

正确定位页脚

2 个答案: