I have a div called "content" which I wish to at least take up the entire height of a window.
我有一个叫“内容”的div,我希望至少占据整个窗口的高度。
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)
使用firebug,我验证了现在确实占据了整个页面(即使页面上没有内容)。就像我想要的)
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).
编辑:似乎可以在chrome 7.0.517.41中使用,但在firefox 3.6.10中就不行了(问题似乎出现在所有版本的firefox 3.6中。也可能是以前的版本)。
4 个解决方案
#1
6
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.
似乎有时会考虑来计算高度。
#2
2
You could try setting an explicit height as well as a min-height:
您可以尝试设置一个显式高度和最小高度:
min-height:100%;
height:100%;
Don't know for sure if it'll work, but something inside says it might.
不确定它是否有用,但是里面的东西说它可能。
#3
2
body, html {
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
}
div#content
{
min-height: 100%;
height: 100%;
}
This works for sure...
这是肯定的…
#4
0
you don't need to use min-height on body. most of the time, you don't need to use it on child block either.
你不需要在身体上使用最小的高度。大多数时候,您也不需要在子块上使用它。
this little article explains it all: http://tympanus.net/codrops/2013/07/17/troubleshooting-css/#article-width-height
这篇小文章解释了这一切:http://tympanus.net/codrops/2013/07/17/troubleshooting-css/#清晰度-宽度-高度
#1
6
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.
似乎有时会考虑来计算高度。
#2
2
You could try setting an explicit height as well as a min-height:
您可以尝试设置一个显式高度和最小高度:
min-height:100%;
height:100%;
Don't know for sure if it'll work, but something inside says it might.
不确定它是否有用,但是里面的东西说它可能。
#3
2
body, html {
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
}
div#content
{
min-height: 100%;
height: 100%;
}
This works for sure...
这是肯定的…
#4
0
you don't need to use min-height on body. most of the time, you don't need to use it on child block either.
你不需要在身体上使用最小的高度。大多数时候,您也不需要在子块上使用它。
this little article explains it all: http://tympanus.net/codrops/2013/07/17/troubleshooting-css/#article-width-height
这篇小文章解释了这一切:http://tympanus.net/codrops/2013/07/17/troubleshooting-css/#清晰度-宽度-高度