CSS全屏显示-绝对位置与高度的100％

Question

使用divhtml和css 创建全屏时，有两个主要选项：

使用方法： html, body, #myDiv {height: 100%, width: 100%}

要么： #myDiv{position: absolute; top:0px; bottom:0px; width: 100%}

一个相对于另一个有什么优势，或者它们可以互换使用吗？

Answer 1

两者都产生相同的效果，即具有全屏div。现在唯一的差异。在定位属性之间

现在，当您将CSS作为

html, body, #myDiv {height: 100%, width: 100%} 

那么默认位置属性是静态的，这意味着它通常会流入网页

但是当你申请

     #myDiv{position: absolute; top:0px; bottom:0px; width: 100%}

它与前一个略有不同。如果position为绝对位置，则表示此div相对于直接父元素，或者如果没有父元素，则它相对于页面本身。如果将另一个div作为父元素，并且在#myDiv中插入一些文本或图像，则可以看到效果。另外，具有绝对位置的元素也会从页面上的元素流中删除，这意味着它不会影响其他元素和其他元素。元素不会影响它

您可以检查jsfiddle链接，亲自了解两种样式的文本位置如何变化http://jsfiddle.net/sidarth1989/32szd39g/

Answer 2

现在已经很好地支持了视口相对单位...因此您可以执行以下操作：

#myDiv {
  height: 100vh;
  width: 100vw;
}

参见此处：https： //www.w3.org/TR/css3-values/#viewport-relative-lengths