使用CSS样式无法摆脱​​HTML页面底部的空间

Question

我最近发布了一个关于使用CSS居中页面的问题。我想出了如何做到这一点，它看起来很棒，但现在，我的页面底部有一堆不必要的空间。我无法弄清楚如何摆脱它。

我将它上传到一个快速免费的虚拟主机，所以你们可以看看。 这就是我正在努力解决的问题：http://eric.200u.com/index.html

这是我关于页面居中的CSS：

html, body 
{
    padding: 0;
    margin: 0;
}

#container 
{
    width: 700px;
    margin: 0 auto;
    text-align: left;
}

Answer 1

那是因为您使用相对定位将元素放在彼此之上。当你这样做时，元素会显示在原始位置以外的其他位置，但它们仍占用文档流中的空间。

使用绝对定位，以便从文档流中取出元素。

Answer 2

问题是因为背景div

<div id="bg"></div>

因为top设置为-190px，所以底部会有一个大小为190的空间。要解决此问题，请为该div设置margin-bottom：-190px。

Answer 3

更简单的解决方案是按如下方式设置最外层元素的样式

body
{
    padding: 0;
    margin: 0 auto;
    width: 700px; /* px is bad here, but I'm keeping things simple for now */
}

#container
{
    position: absolute;
    background: url(images/pixel_down.jpg);
    height: 100%;
}

并从所有其他元素中删除CSS定位。为什么让导航条形码错综复杂，以至于无法使用简单的图像行？

您可能还想尝试找一位广告不会搞砸布局的免费主持人。我相信http://www.webs.com/就是这样的，虽然我不确定自从上次看的时候它是否发生了变化。