我创建了一些代码笔,这些代码笔在元素定位方面表现出令人困惑的行为

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


  如果元素具有“位置:绝对”,则包含块为
  由最近的祖先以positionabsolute建立,
  relativefixed,方法如下:
  
  
  如果祖先是内联元素,则包含块是第一个和第二个填充框周围的边界框
  为该元素生成的最后一个内联框。在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/

10-12 00:48
查看更多