最小高度100％不适用于内部div [英] min-height 100% doesnt work on inner div
问题描述
我有一个名为内容的div，我希望它至少占据整个窗口的高度。
所以我做的是这样的：
body
{
min-height：100％;
height：auto！important;
/ *以下内容可能不相关，但我会将它们包含在* /
min-width：600px;
颜色：#fff;
font-family：'lucida grande'，verdana，helvetica，arial，sans-serif;
font-size：90％;
保证金：0;
}
div＃content
{
min-height：100％;
/ *以下内容可能不相关，但我会将它们包括在内* /
clear：both;
颜色：＃333;
padding：10px 20px 40px 20px;
职位：亲属;
background：url（/img/strawberry.png）right right no-repeat;
}
使用萤火虫，我证实确实现在占用整个网页（甚至当页面上没有内容时，就像我想的那样）
然而，问题在于，内容并没有占据整个高度，而只是大到其内部内容。编辑：似乎工作在铬7.0.517.41，但不是在Firefox 3.6.10（问题似乎发生在所有版本的Firefox 3.6.x和可能以前的版本
我已经解决了一个类似的问题：
html，body {
padding：0;
保证金：0;
身高：100％;
最低身高：100％;
}
它似乎< html> 来计算身高。
I have a div called "content" which I wish to at least take up the entire height of a window.
So what I did was this:
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;
}
Using firebug, I verified that indeed is now taking up the entire page (even when there's no content on the page. Just as I wanted)
However the problem is, content is not taking up the entire height of , but instead being only as large as its internal contents.
EDIT: Seems to work in chrome 7.0.517.41, but not in firefox 3.6.10 (problem seems to occur in all versions of firefox 3.6.x and probably previous versions as well).
I've already solved a similar problem with
html,body {
padding:0;
margin:0;
height:100%;
min-height:100%;
}
It seems <html> is sometimes taken into account to calculate height.
这篇关于最小高度100％不适用于内部div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
