容器不会延伸到页面的底部

我现在非常沮丧。我无法弄清楚为什么我的容器不会延伸到页面的底部。它到达可见窗口的底部，但如果向下滚动，则背景结束。容器不会延伸到页面的底部

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

<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。我不知道为什么＃容器不会延伸到页面的底部！

而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％，我尝试设置最小宽度...我无法弄清楚它！

编辑： OK我做了一个JSFILDDLE 所以，如果你退缩在的jsfiddle显示第二大小比表小，然后刷新它，你会看到，背景不走一路下来，桌子在空中“浮动”。 http://jsfiddle.net/LGM3y/1/

来源

2012-06-21 patricko

考虑在http://jsfiddle.net演示中重现问题。 – lanzz

你想选择一类，但是容器是一个ID，所以你需要：

#container

代替

.container

如果不解决它尝试设置HTML标签上的背景CSS而不是容器。

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

等

来源

2012-06-21 22:41:00 ConorLuddy

不要忘记将容器更改为最小高度：100％，以便在内容激活垂直滚动时其背景从页面延伸。 – greg84

哎呀，对于课堂/编号混淆感到抱歉。不是这个。我键入的HTML但切割粘贴的CSS，所以我错过了。他们在我的代码相同 – patricko

对不起！尝试HTML的东西，所以:) – ConorLuddy

一招我用这对<div>的（这在IE中有混合的结果）是在要延长容器中的CSS规则专门设置display: block。

例子：

#container { 
display: block; 
height: 100%; 
}

来源

2012-06-21 22:46:03 relativelycoded

是的，这也值得一试！ – ConorLuddy

没有运气那里：/ – patricko

http://jsfiddle.net/U4aWc/ 让你成为一个小提琴:)如果它不正确，请调整它，看看我们是否可以帮助！ – ConorLuddy

这似乎很好地工作（如果我明白你问什么），如果你删除

html {height: 100%;}

容器填充的空间..

来源

2012-06-22 00:03:19 Livingston

容器不会延伸到页面的底部

回答

相关问题