我创建了一些代码笔,这些代码笔在元素定位方面表现出令人困惑的行为
First Codepen显示一个具有position:absolute和bottom:10px的块元素
<div class="block_element square absolute">
Example
</div>
<div class="content">
<!-- a bunch of lorem ipsum -->
</div>
此绝对位置显示正确的行为,并从屏幕底部向上10px定位
Second Codepen具有可抓取html元素高度并将其显示在高度为5000px的div中的javascript。
var o = document.getElementsByTagName("html")[0];
var styles = window.getComputedStyle(o);
var p = styles.getPropertyValue('height');
document.getElementById('answer').innerHTML = p;
html元素的高度显示为大于屏幕高度的高度,这与html高度和宽度等于屏幕尺寸的普遍看法背道而驰。如Here所示
“ html元素的高度和宽度由浏览器窗口控制”
(从上面的链接)
为什么html元素的高度不等于屏幕的高度?如果是这样,那么位置是什么:绝对引用?
最佳答案
Absolutely positioned元素相对于其包含块偏移。
在绝对定位模型中,框相对于其包含的块显式偏移。
对于他们来说,containing block是
如果元素具有“位置:绝对”,则包含块为
由最近的祖先以position
的absolute
建立,
relative
或fixed
,方法如下:
如果祖先是内联元素,则包含块是第一个和第二个填充框周围的边界框
为该元素生成的最后一个内联框。在CSS 2.1中,如果
内联元素分为多行,包含的块是
未定义。
否则,包含块由祖先的padding edge组成。
如果没有这样的祖先,则包含块为初始
包含块。
在您的情况下,没有定位的祖先,因此包含的块为the initial one:
root element所在的包含块是一个矩形
称为初始包含块。对于连续媒体,它具有
viewport的尺寸,并锚定在画布原点;它是
page area用于分页媒体。
不,默认情况下,根元素的高度由其内容确定,而不是视口的高度。但是你可以用
html { height: 100%; }
关于html - 是否具有position:绝对值的对象引用html元素的高度或视口(viewport)?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36704666/