当min-height：100％时，为什么HTML和BODY不占用文档的所有可用高度？ [重复]

This question already has an answer here:

这个问题在这里已有答案:

Make body have 100% of the browser height 21 answers

让身体拥有100%的浏览器高度21个答案

I have been struggling to understand this scenario

我一直在努力理解这种情况

I have set, in CSS

我在CSS中设置了

html, body {
    min-height: 100%;
}

So that when there is no content on the page, the html and body take 100% of the height of page. And if there is content in body, these should change their height according to content height.

因此,当页面上没有内容时,html和body占用页面高度的100%。如果体内有内容,则应根据内容高度改变其高度。

But when I add some content on the page (enough to display scroll bar), html and body are not taking 100% height of the document. i.e. if my screen height is 700px, in either case $('body').height() would return 700px;

但是当我在页面上添加一些内容(足以显示滚动条)时,html和body不会占用文档的100%高度。即如果我的屏幕高度为700px,则无论如何都是$('body')。height()将返回700px;

Why is that?

这是为什么?

EDIT: In other words, I want my body Tag to be at least 100% of screen but it should grow if content is added.

编辑:换句话说,我希望我的身体标签至少是屏幕的100%,但如果添加内容,它应该会增长。

2 个解决方案

#1

I've misread the question at first, but on second thought I'd interpret it as:

我一开始误解了这个问题,但第二个想到我会把它解释为:

The html element ignores min-height: 100%.

html元素忽略min-height:100%。

Why is that?

这是为什么?

The answer to "Why" is in the relevant spec, emphasis mine:

“为什么”的答案在相关规范中,强调我的:

min-height

...

Value: <length> | <percentage> | inherit

值: | <百分比> |继承

...

<percentage>
Specifies a percentage for determining the used value. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').

指定用于确定已使用值的百分比。百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则百分比值将被视为“0”(对于“min-height”)或“none” ('max-height')。

This is why you need to set a height for the html element for min-height to work on the body element. Alternatively you can position the html element absolutely, like this:

这就是为什么你需要设置html元素的高度为min-height来处理body元素。或者你可以绝对定位html元素,如下所示:

html { border: 10px solid black }
body { border: 10px dashed red }

html { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }    
/* alternatively: html { min-height: 100%; height: 100%; } */    

html { min-height: 100%; }
body { min-height: 100%; }

See the position: absolute demo or the height: 100% demo.

查看位置:绝对演示或高度:100%演示。

Thanks to @Alohci for correcting me on the interpretation of the spec.

感谢@Alohci纠正我对规范的解释。

#2

In the case you describe, html and body do take up 100% of the screen height. Add a background-color to see this:

在您描述的情况下,html和body确实占据了屏幕高度的100%。添加背景颜色以查看此内容:

body {
    background-color: lightblue;
}

You'll see the entire screen is now coloured. The jquery statement you're getting .height() from is still only returning the height of the content, not being stretched to the height of the screen. When you have a scrollbar, .height() of body will return the height of all the content, not just the visible area. You can get the height of the window with $(window).height(). See this fiddle for a demo.

你会看到整个屏幕现在都是彩色的。你从.height()得到的jquery语句仍然只返回内容的高度,而不是被拉伸到屏幕的高度。当你有一个滚动条时,身体的.height()将返回所有内容的高度,而不仅仅是可见区域。您可以使用$(window).height()获取窗口的高度。看一下这个小提琴的演示。

#1