html – 容器不会扩展到页面底部

概述我现在非常沮丧.我无法弄清楚为什么我的容器不会扩展到页面底部.它到达可见窗口的底部,但如果向下滚动,则背景结束. 我的基本结构看起来像这样…… <div id='container'> <div id='content'> /*Some Content here but all divs opened here are closed. (Title Bar, Nav, et 我现在非常沮丧.我无法弄清楚为什么我的容器不会扩展到页面底部.它到达可见窗口的底部,但如果向下滚动,则背景结束.

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

<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 – 容器不会扩展到页面底部全部内容，希望文章能够帮你解决html – 容器不会扩展到页面底部所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。