为什么底部页脚位于& lt; html& gt;内如果& lt; html& gt;高度始终等于视口的高度 [英] why bottom positioned footer inside <html> moves below viewport if <html> height is always equal to viewport's height
问题描述
本文指出了< html>的高度.元素由浏览器计算，并且始终等于视口的高度，查看图片供快速参考.因此，在此粘性页脚示例中，页脚绝对位于< html>元素，如果内容超过视口高度的100％，则向下移动.如果它向下移动，则我认为< html>的高度应为元素变得大于视口的100％，这与开头提到的文章相矛盾.我想念什么?
This article states that height of the <html> element is calculated by a browser and always equal to the height of the viewport, see the picture for quick reference. So in this sticky footer example the footer is absolutely positioned at the bottom inside <html> element and moves down if the content is over 100% of the viewport's height. If it moves down than I assume that the height of the <html> element gets bigger than 100% of the viewport, which contradicts the article mentioned in the beginning. What am I missing?
更新是基于 Hashem Qolami 的答案:
初始包含块的高度和宽度由浏览器自动计算，并且始终等于视口尺寸.HTML元素的高度是相对于其内容的，但是，如果我们给它明确的高度100％，则它占其包含块高度的100％，该包含块是初始包含块的高度，其高度等于视口的高度.这些结论\要点是否正确?
UPDATE based on Hashem Qolami's answer:
Initial containing block has height and width automatically calculated by the browser and is always equal to viewport dimensions.
HTML element height is relative to its contents, BUT if we give it explicit height of 100% it takes 100% of the height of its containing block which is initial containing block with the height equal to viewport's. Are these conclusions\main points correct?
推荐答案
不要让该文章欺骗您.乍一看，这似乎令人困惑，但我将尝试向您展示浏览器如何处理< html> 元素.
Do not let that article deceive you. At first look it may seem confusing but I'll try to show you how the browser deals with <html> element.
html元素的高度和宽度由浏览器窗口控制.
The html element's height and width are controlled by the browser window.
对于 width 是正确的，但对于 height 而言并非如此.
<html> element - like block-level elements - takes the entire horizontal space of its containing block1 which is the initial containing block:.
根元素所在的包含块是一个长方形称为初始包含块.对于连续媒体，具有视口的尺寸，并固定在画布原点；这是分页媒体的页面区域.
The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media.
默认情况下，其计算高度相对于其内容，除非您给它一个明确的 height 2 .因此，以下陈述是不正确的:
However its computed height is relative to its contents by default, unless you give it an explicit height2. Hence the following statement is NOT true:
< html>元素的高度是由浏览器计算的，并且始终等于视口的高度
height of the
<html>element is calculated by a browser and always equal to the height of the viewport
现在，您可能会问"如果< html> 不占用视口的高度，为什么要给 background-color < html> 更改视口的背景颜色?"
Now you may ask "If the <html> doesn't take the height of the viewport, why does giving a background-color to the <html> changes the background color of the viewport?"
这是因为视口采用了根元素< html> 的背景色.规范:
This is because the viewport takes the background color of the root element, the <html>. This is documented in the spec:
3.11.1. The Canvas Background and the Root Element
根元素的背景变为画布及其背景绘画区域扩展到覆盖整个帆布.但是，任何图像的大小和位置都相对于根元素，就好像它们是为该元素单独绘制的一样.(其他换句话说，背景定位区域被确定为根根元素不会再次绘制此背景，即背景的使用值是透明的.
The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas. However, any images are sized and positioned relative to the root element as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) The root element does not paint this background again, i.e., the used value of its background is transparent.
此外，如果未指定< html> 的背景色，它将采用< body> 的背景色(如果有任何)，并将其传递到视口.规范中对此进行了描述.另外，您可能想看看SO上的该主题:
In addition, if the background color of the <html> is not specified, it'll take the background color of the <body> (if there's any) and it'll pass it to the viewport. This is has been described in the spec. Also you might want to have a look at this topic on SO:
但是再次，您可能会想:"为什么相对于视口而不是< html> 元素放置绝对绝对定位的元素" 3
But again you may wonder "why an absolutely positioned element is positioned with the respect to the viewport rather than the <html> element"3
答案将是因为绝对定位的元素相对于其包含的块而定位.相对于包含视口尺寸的初始包含块的 fixed 定位元素.并且 absolute 相对于其包含块的定位元素，该元素由最近的祖先以 static 以外的其他任何元素的 position 建立.
The answer will be because absolutely positioned elements are positioned relative to their containing block. fixed positioned elements respect to the initial containing block which takes the dimensions of the viewport. And absolute positioned elements respect to their containing block which is established by the nearest ancestor with a position of anything other than static.
如果没有这样的祖先，则包含块为初始包含块.
If there is no such ancestor, the containing block is the initial containing block.
因此，在< html> 内的绝对定位元素-具有 bottom:0 声明-不会放在< html> 本身，但是到最初的包含块，即视口； 此处的示例 .
Therefore an absolute positioned element - having bottom: 0 declaration - inside <html> won't be placed with the respect to the <html> itself, but to the initial containing block, i.e. the viewport; Example Here.
为了相对于< html> 定位，我们必须通过为< html> 提供相对的位置； 此处的示例 4
In order to position it relative to the <html>, we have to establish a containing block for it by giving the <html> a position of relative; Example Here4
话虽如此，如果您给< html> 赋予 100％的 height ，则将需要它将溢出< html> 元素.因此，绝对定位的元素将不再放置在页面底部.
That being said, if you give the <html> a height of 100%, it will take 100% of height of the viewport, but if its contents get that bigger that exceeds the computed height, it'll overflow the <html> element. Thus, the absolute positioned element won't be placed at the bottom of the page anymore.
我假设元素的高度大于100％视口
I assume that the height of the element gets bigger than 100% of the viewport
您的想法是正确的.这是因为使用 最小高度:100％ 声明，而不是 height 属性.
Your thought is true. This is because of using min-height: 100% declaration on the <html> rather than height property.
从 MDN :
From the MDN:
min-heightCSS属性用于设置广告素材的最小高度给定的元素.它防止了height属性的使用值变得小于指定的最小高度值.
The
min-heightCSS property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.
它使< html> 变得比视口高(按其内容).
1 伙计们有时使用"parent" 来指代盒子的包含块.那是 骗子 ！实际上，块级元素与其包含块的宽度有关他们坐在的地方.
1 Folks sometimes use the term of "parent" in order to refer to the box's containing block. That's a Lie-to-children! In fact block-level elements respect to the width of their containing block in which they are sit.
2 在演示中，红色框显示< html> 元素的边框，蓝色框属于< body> .
2 In the demo, the red box shows the border-box of the <html> element and the blue box belongs to the <body>.
3 假定< html> 默认情况下不会占据视口的整个高度.
3 Assuming the <html> doesn't take the entire height of the viewport by default.
4 This is exactly what has been done in the Twitter Bootstrap's sticky footer example.
这篇关于为什么底部页脚位于& lt; html& gt;内如果& lt; html& gt;高度始终等于视口的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
