CSS 正文标签高度仅限于可见区域

我正在重新设计这个网站:http://puffandpass.co.za/

采用这种设计:

http://puffandpass.co.za/incubator/ (这是不完整的嘿..)

设计具有以下结构:

 <html>

     <body>
            <div id="wrapper">
                     <div id="page">
                             *//content goes here*
                      </div>
            </div>
   </body>
</html>

现在这是我对上述每个标签的 CSS:

html, body          { 
color: #000;background: #3B5998; 
font:  10px Helvetica, Arial, Verdana,sans-serif; 
height: 100%; 
line-height: 1.5em;
text-align:center; 
}

#wrapper            { 
background: none repeat scroll 0 0 #123569;    
border: 0.5em solid #123569;   
 height: 100%;    
margin: 0 auto;    
width: 102.4em;
}


#page               { 
background: none repeat scroll 0 0 #FFFFFF;   
float: left;  
text-align: center;    
width: 102.4em;
 }

[问题] html、body(以及 #wrapper)标签的高度限制在屏幕的可见区域。这意味着 #page 标记的内容溢出到 #wrapper 之外。 当我打开 Firebug 时，高度会变差(变小)。

问题: 我做错了什么？

提前致谢。

中号

最佳答案

在 #wrapper 上，将 height 更改为 min-height。

由于父元素上有 height: 100%，这将强制 #wrapper 的最小高度为 100%，而不是高度正好是 100%，不允许增加。

然后，在 #page 上删除 position: absolute 和 float: left。

关于CSS 正文标签高度仅限于可见区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7713358/