Question

有人可以帮我消除本网站底部的额外空白吗？ http://www.vonlay.com/

此图片显示了我要删除的内容：http://img691.imageshack.us/img691/8837/screenshot20110607at715.png

以下是我如何设置页脚。

html, body { height: 100%; }
body > #wrapper { height: auto; min-height: 100%; }
#footer { position: relative; height: 140px; z-index: 10; clear: both;
    margin-top: -140px; background: #700; color: #fff; }

Answer 1

你应该添加：

#footer .content p {
    margin-bottom: 0
}

我实际上在那之前写了另一个答案来解释正在发生的事情，使用另一种解决办法，这里是：

您应该将overflow: hidden添加到#footer。

这将解决问题，即margin内的p元素上的<div class="copyright-notice">正在通过#footer折叠。请参阅：collapsing margins。

如果您觉得这不太可能，请尝试添加此以查看会发生什么：

#footer .content p {
    margin-bottom: 200px
}

Answer 2

尝试增加页脚的高度：

#footer { height: 145px; }

Answer 3

尝试在页脚和/或正文的底部设置填充和/或边距为零。

Answer 4

尝试使用定位：

#footer {
  position: absolute;
  bottom: 0;
}

Answer 5

在页脚类更改

 height: 160px;

...试

Answer 6

试试这个：在＆＃34; body＆＃34;中的每个HTML元素周围添加一个包装器元素，不包括页脚，然后在CSS中执行此操作：

.wrapper {
    min-height: calc(100vh -<your-footer-height>px);
}

您不必在页脚中添加任何样式，因为它不在包装器中。所以内容只占用设备屏幕的视口高度。

Answer 7

将此内容放入CSS

部分

min-height: 100vh;

如何摆脱底部的空白？

7 个答案: