html页面高度和宽度,html和body元素的高度和宽度

您的html实际上完全延伸到视口的100％高度,因为视口这里是浏览器窗口,而不是内部内容.

very much content

#div1 {

height:300px;

overflow-y:scroll;

border: 1px solid black;

}

#div2 {

height:100%;

}

#div3 {

height:600px;

}

这里div1的高度为300px并且滚动.滚动内容时,只需移动内部div,但高度保持不变,即300px.当您设置高度时,恰好相同：100％到html.您的浏览器高度保持不变.

缩小视口时,您没有滚动,因此内部内容的高度小于视口的高度.

简而言之,html {height：100％}与父亲的身高有关,而与内在内容的高度无关

更新：

您可以为block-element的高度指定3种类型的值：

>长度 – 设定固定高度(例如’200px’,’50em’).就是这样,我再也不说了.

>百分比 – 从W3C spec开始：

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 value computes to ‘auto’. A percentage height on the root element is relative to the initial containing block.

> auto – 高度取决于其他属性的值. (通常在内部内容的高度：文本,其他内联元素,块元素等)

浏览器显示您的页面时发生了什么：

>它获得高度：< html>为100％.这意味着生成的高度是根据生成的框(在这种情况下是html元素)包含块(初始包含块,即该情况下的浏览器窗口)的高度计算的.比方说1024px.

>然后它需要高度：< body>为100％.它会将body的高度设置为已计算的html高度,即1024px.

>然后浏览器将高度：auto应用于#wrapper,然后应用#container和< p>.我不知道它究竟是怎么做的,但可以假设它推迟了高度设置(以及分别依赖于背景,边界等的所有其他风格)并继续进行内部内容.

>下一点是文字内容.浏览器采用指定的相关属性或它自己的属性,即默认样式,如font-family,font-size和文本高度.

>之后,它会将高度设置为< p> -element,以便< p>将向下拉伸以包含所有内容(在该情况下为文本). #container和#wrapper也会发生同样的情况.

如果碰巧#wrapper的高度大于身体的高度(同意的是1024 px),那么溢出应该应用于身体.这是可见的,这是默认值.然后溢出：可见应用于html.然后浏览器显示整个窗口的滚动.老实说,我不知道这是否由W3C规范指定,但可以假设它是.

因此,当您滚动窗口时,您的html和body将像所有其他元素一样移动.这与任何其他元素的行为相同(例如我在上面发布的jsfiddle)：

请注意,背景设置在body元素上,但它延伸到整个canvas,即远远超出body元素本身.这是你担心可能需要在身体上设置bg属性.这与W3C spec 100％兼容(切断)：

For documents whose root element is an … “html” element that has computed values of ‘transparent’ for ‘background-color’ and ‘none’ for ‘background-image’, user agents must instead use the computed value of the background properties from that element’s first … “body” element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

缩小页面时,浏览器会重新计算所有尺寸.让我们说,每个Ctrl – 单击页面缩小,例如,缩小20％.然后缩小所有文本,因为它的高度取决于字体大小,受Ctrl控制点击影响,相应地< p>,#container和#wrapper都会减少,因为它们的高度取决于文本的高度.但是body和html都有高度,这取决于窗口的高度,不受Ctrl-单击的影响.这就是为什么你最终得到这个：

在这种情况下,宽度和高度行为之间没有区别.你没有看到水平尺寸的相同问题只是因为你设置了宽度：960px;对于#container,它的结果小于浏览器窗口的宽度,因此不会发生溢出.如果#container的宽度超过了body的宽度,你会看到：

这一切都是正常和预期的行为,这里没有什么可解决的.