无法使用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 id="bg"></div>

由于顶部设置为-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/就是这样的一个，尽管我不确定自从我上次看过之后，它是否发生了变化。