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

【问题标题】：CSS Body Tag Height Limits to Visisble Area OnlyCSS 正文标签高度仅限于可见区域
【发布时间】：2011-12-04 12:42:14
【问题描述】：

我正在重新设计这个网站：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 后高度变差（变小）。

问题： 我做错了什么？

提前致谢。

【问题讨论】：

标签： css layout height overflow

【解决方案1】：

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

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

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

【讨论】：