<html>
元素。
<html>
元素的高度和宽度由浏览器窗口控制。
这对于width
是正确的,但对于height
则不正确。
<html>
元素 - 像块级元素一样 - 占据其包含块1的整个水平空间,即初始包含块:
根元素所在的包含块是一个矩形,称为初始包含块。对于连续媒体,它具有视口的尺寸,并锚定在画布原点;对于分页媒体,则是页面区域。
但是默认情况下,其计算高度相对于其内容, 除非您给它明确的height
2。因此以下陈述是不正确的:
现在你可能会问:“如果
<html>
元素的高度由浏览器计算,并始终等于视口的高度
<html>
不占据视口的高度,为什么给<html>
设置background-color
会改变视口的背景颜色?”这是因为视口会采用根元素<html>
的背景颜色。这在规范中有所说明。
根元素的背景成为画布的背景,其背景绘制区域扩展到覆盖整个画布。但是,任何图像都相对于根元素进行大小和定位,就好像它们只为该元素绘制一样(换句话说,背景定位区域与根元素相同)。根元素不会再次绘制此背景,即其背景的使用值为透明。
此外,如果未指定<html>
的背景颜色,则将采用<body>
的背景颜色(如果有),并将其传递给视口。这在规范中已经描述过了。您还可以查看SO上的此主题:
但是你可能会想知道为什么"绝对定位的元素相对于视口而不是<html>
元素定位"3
答案是因为绝对定位的元素相对于其包含块定位。fixed
定位的元素相对于初始化包含块定位,该包含块的尺寸为视口的尺寸。而absolute
定位的元素相对于最近具有除static
以外的任何position
属性的祖先元素建立的包含块。
关键点是:
因此,在如果没有这样的祖先元素,则包含块是初始包含块。
<html>
中,一个具有 bottom: 0
声明的 absolute
定位元素不会相对于 <html>
本身进行定位,而是相对于初始包含块即视口进行定位;示例在这里。<html>
定位,我们必须通过给 <html>
添加 position: relative
来为其建立一个包含块;示例在这里4。
话虽如此,如果您给<html>
设置height
为100%
,它将占用视口高度的100%,但是如果其内容变得太大超过了计算出的高度,它会溢出<html>
元素。因此,absolute
定位的元素将不再放置在页面底部。
我认为
<html>
元素的高度会比视口的100%更大
您的想法是正确的。这是因为在<html>
上使用了min-height: 100%
声明,而不是height
属性。
来自MDN:
min-height
CSS属性用于设置给定元素的最小高度。它防止高度属性的使用值变小于min-height指定的值。
它使得<html>
可以通过其内容超出视口的高度限制。
1 有时候人们会使用“父级”这个词来指代盒子的包含块。这是一个“欺骗儿童”的说法!事实上,块级元素要遵守所在包含块的宽度。
2 在演示中,红色框显示了<html>
元素的边框框盒,蓝色框属于<body>
。
3 假设<html>
默认情况下不占据整个视口的高度。
4 这正是Twitter Bootstrap的粘性页脚示例中所做的。