做对象与位置:绝对引用html元素的高度或视口

Question

我创建了代码笔，这些代码笔演示了有关元素定位的混淆行为

第一个代码笔显示了一个块元素，位置：绝对和底部：10px

 <div class="block_element square absolute">
 Example
 </div>
 <div class="content">
 <!-- a bunch of lorem ipsum -->
 </div>

此绝对位置显示正确的行为，并将位置从屏幕底部向上 10px

第二个代码笔有javascript，它抓取html元素的高度并将其显示在高度为5000px的div中。

var o = document.getElementsByTagName("html")[0];
var styles = window.getComputedStyle(o);
var p = styles.getPropertyValue('height');
document.getElementById('answer').innerHTML = p;

html

元素的高度显示为大于屏幕高度的高度，这与 html 高度和宽度等于屏幕大小的普遍看法背道而驰。比如在这里看到的

"html 元素的高度和宽度由浏览器窗口控制"(来自上面的链接(

为什么html元素高度不等于屏幕高度？ 如果是这样，什么是位置：绝对引用？

Answer 1

绝对定位的元素相对于其包含块进行偏移。

在绝对定位模型中，盒子相对于其包含块显式偏移。

对他们来说，包含块是

如果元素具有"位置：绝对"，则包含块为 由position absolute的近祖建立， relative或fixed，按以下方式：

1. 在祖先是内联元素的情况下，包含块是第一个和 为该元素生成的最后一个内联框。在 CSS 2.1 中，如果 内联元素被拆分为多行，包含块为 定义。
2. 否则，包含块由祖先的填充边缘形成。

如果没有这样的祖先，则包含块是初始的 包含块。

在您的情况下，没有定位的祖先，因此包含块是初始块：

根元素所在的包含块是一个矩形 称为初始包含块。对于连续介质，它具有 视口的尺寸，并锚定在画布原点;是的 分页媒体的页面区域。

不，默认情况下，根元素的高度由其内容给出，而不是视口的高度。但你可以通过以下方式实现这一目标

html { height: 100%; }

Answer 2

5000px ( .box 高度( + 8px ( body 上边距( + 8px ( body 下边距( + 5px ( .box 顶部填充( + 5px ( .box 底部填充( + 1px (

.box 上边框( + 1px ( .box 下边框( = 5028px。

Answer 3

在第二支笔中，高度5028px表示 5000px + 10px(填充(+ 2px(边框(+ body的默认padding之和。

尝试添加以下行：

body { margin: 0; }

并注释padding和border并删除body的默认边距，将显示5000px就像在笔的这个叉子中一样。