我现在非常沮丧。我不知道为什么我的容器不会延伸到页面底部。它到达可见窗口的底部,但如果您向下滚动超过该窗口,则背景结束。
我的基本结构看起来像这样...
<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/
您正在尝试选择一个类,但容器是一个 ID,因此您需要:
#container
而不是
.container
如果这不能解决它,请尝试在 HTML 标记而不是容器上设置后台 CSS。
html{
height:100%;
background:#ccc url(images/bg.png);
}
等
如果您删除
html {height: 100%;}
容器填满了空间..
我在<div>
's(在IE中结果混合)上使用的一个技巧是在CSS规则中专门为要扩展的容器设置display: block
。
例:
#container {
display: block;
height: 100%;
}