为什么底部定位页脚在< html>如果< html> height总是等于视口的高度 [英] why bottom positioned footer inside <html> moves below viewport if <html> height is always equal to viewport's height
问题描述
本文说明了< html>元素由浏览器计算，总是等于视口的高度，请参阅图片以便快速参考。
因此，在此粘性页脚示例中，页脚绝对位于底部; html>元素，如果内容超过视口高度的100％，则向下移动。如果它向下移动，我假设< html>元素大于100％的视口，这与开头提到的文章相矛盾。根据 Hashem Qolami 的答案，我错过了什么？
UPDATE br>
初始包含块具有由浏览器自动计算的高度和宽度，并且始终等于视口尺寸。
HTML元素高度是相对于它的内容，但是如果我们给它显式高度100％，它需要100％的包含块的高度，这是包含高度等于视口的块的初始包含。这些结论是否正确？
不要让这篇文章欺骗你。首先看看它可能看起来很混乱，但我会试着告诉你浏览器如何处理< html> 元素。
html元素的高度和宽度由浏览器窗口控制。
对于 height 的 width 但不是真的。
< html> 元素类的块级元素 - 取其包含块 1 ，它是初始包含块：
根元素所在的包含块是一个矩形
称为初始包含块。对于连续媒体，它具有视口的
尺寸并且锚定在画布原点;它是
分页媒体的页面区域。
但是它的计算高度相对于其内容，除非您给它一个明确的 height 2 。因此，以下语句不是真的： c> c> 元素由浏览器计算，总是
等于视口的高度
现在你可以问如果< html> 不占用视口的高度，为什么给出 background-color < html> 更改视口的背景颜色？
这是因为视口采用根元素的背景颜色，< html> 。这在规范中有说明：
根元素的背景成为
画布的背景及其背景绘画区域延伸到覆盖整个
画布。然而，任何图像的大小和位置相对于
根元素，就好像它们只为该元素绘制。 （在其他
字中，背景定位区域被确定为根
元素。）根元素不再次绘制这个背景，即，
其背景的使用值是透明的。
此外，如果< html> 没有指定，它将采用< body> （如果有）和它会将它传递到视口。这已在规范中进行了说明。此外，您可能想查看此主题的SO：
但您又可能想知道 absolute 定位元素相对于视口定位，而不是< html>元素 3
答案是因为绝对定位的元素相对于它们的包含块定位。 fixed 相对于包含视口尺寸的初始包含块的定位元素。和绝对定位元素相对于它们的包含块由具有位置的最近祖先建立的除了 static 。
要点是：
如果没有
因此，绝对定位元素 - 具有 bottom：0 声明 - 在< html> 对于< html> 本身，而是对于初始包含块，即视口; 这里的示例 。
为了相对于< html> 定位它，我们必须通过给出 html> a a 位置 这里的示例 4
话虽如此，如果你给予< html> c $ c> height of 100％，它将需要 c>视口的高度 c> c> em>超过计算的高度，它会溢出< html> 元素。因此，绝对定位元素不会再放置在页面底部。
我假设元素的高度大于100％
的视口
真正。这是因为使用 min-height：在 < html> 而不是 height 属性上的100％
从 MDN ：
code> CSS属性用于设置
给定元素的最小高度。它防止
的height属性的已使用值小于为min-height指定的值。
< html> 高于视口<
1 的父，以便引用框的包含块。这是一个 李儿童 ！事实上，块级元素与其包含块的宽度有关
2 在演示中，红色框显示边框框< html> 元素和蓝色框属于< body> 。 p>
3 假设< html> 的视口。
4 Twitter Bootstrap的粘帖示例。
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?
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?
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.
The html element's height and width are controlled by the browser window.
This is true for the width but not true for the 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.
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:
height of the
<html>element is calculated by a browser and always equal to the height of the viewport
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?"
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.
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:
But again you may wonder "why an absolutely positioned element is positioned with the respect to the viewport rather than the <html> element"3
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.
The key point is:
If there is no such ancestor, the containing block is the initial containing block.
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.
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
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.
I assume that the height of the element gets bigger than 100% of the viewport
Your thought is true. This is because of using min-height: 100% declaration on the <html> rather than height property.
From the MDN:
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.
It lets the <html> get higher than the viewport (by its contents).
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 In the demo, the red box shows the border-box of the <html> element and the blue box belongs to the <body>.
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.
这篇关于为什么底部定位页脚在< html>如果< html> height总是等于视口的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![请参阅图片](\"http://phrogz.net/css/htmlvsbody/bodyoverflowing.png\"){kind=link}
