4

我现在非常沮丧。我不知道为什么我的容器不会延伸到页面底部。它到达可见窗口的底部，但如果您向下滚动超过该窗口，则背景结束。

我的基本结构看起来像这样......

<div id='container'>
    <div id='content'>
        /*Some Content here but all divs opened here are closed. (Title Bar, Nav, etc)
        <div id='mainTableContainer'>
             /*This is where a bulk of the code is. A table is generated in PHP and it
                gets fairly lengthy.
        </div>
    </div>
</div>

所以这基本上是HTML。我一生都无法弄清楚为什么#container 不会延伸到页面底部！

和 CSS

html{
height:100%;    
}
body {
    font: 100%/1.4 "Museo-sans", Verdana, Arial, Helvetica, sans-serif;
    background: #ccc;
    margin: 0;
    padding: 0;
    color: #000;
    height:100%;
    background-image:url(images/bg.png);
}
.container {
    width: 960px;
    background: #FFF;
    height:100%;
    margin: 0 auto;
    border-left-style:dashed;
    border-right-style:dashed;
    border-width:1px;
    border-color:#bf0000;

  }
 .content {
    height:100%;
    padding: 10px 0;
  }
#mainTableContainer{
    margin:0px auto;
    width:90%;
    height:100%;
    text-align:center;

}

我尝试了很多在这个网站上找到的技巧，但没有任何帮助。我不认为有什么是浮动的。我尝试将所有高度设置为 100%，我尝试设置最小宽度……我想不通！！

编辑：好的，我做了一个 JSFILDDLE 因此，如果您将 jsfiddle 中的显示秒数缩小到小于表格，然后刷新它，您会看到背景并没有一直向下，表格是留在空中“漂浮”。 http://jsfiddle.net/LGM3y/1/

4

3 回答 3

4

您正在尝试选择一个类，但容器是一个 ID，因此您需要：

#container

代替

.container

如果这不能解决，请尝试在 HTML 标记而不是容器上设置背景 CSS。

html{
    height:100%;    
    background:#ccc url(images/bg.png);
}

ETC

于 2012-06-21T22:41:00.067 回答
1

如果您删除

html {height: 100%;}

容器填满空间..

于 2012-06-22T00:03:19.383 回答
0

我在<div>'s 上使用的一个技巧（在 IE 中具有混合结果）是专门display: block为要扩展的容器设置 CSS 规则。

例子：

#container {
display: block;
height: 100%;
}
于 2012-06-21T22:46:03.783 回答