我有一个名为"内容"的div,我希望至少占据一个窗口的整个高度.
所以我做的是这样的:
body
{
min-height:100%;
height:auto !important;
/* The following probably aren't relevant but I'll include them just in case */
min-width:600px;
color: #fff;
font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
font-size:90%;
margin: 0;
}
div#content
{
min-height:100%;
/* The following probably aren't relevant but I'll include them just in case */
clear: both;
color: #333;
padding: 10px 20px 40px 20px;
position:relative;
background:url(/img/strawberry.png) right bottom no-repeat;
}
使用firebug,我确认现在确实占用了整个页面(即使页面上没有内容.就像我想要的那样)
然而问题是,内容并没有占据整个高度,而是仅仅与内部内容一样大.
编辑:似乎在Chrome 7.0.517.41中工作,但在firefox 3.6.10中没有(问题似乎发生在所有版本的firefox 3.6.x以及可能的早期版本中).
我已经解决了类似的问题
html,body {
padding:0;
margin:0;
height:100%;
min-height:100%;
}
似乎<html>有时会考虑计算高度.