CSS全屏 - 位置绝对VS 100％的高度

Question

当HTML创建全屏div & CSS上主要有两个选项：

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

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

有什么一个优于另一个，还是可以互换使用？创建一个全屏幕的div

Answer 1

两者产生相同的效果，即有一个完整的屏幕的div。 现在唯一的区别。是定位属性之间现在

当你有你的CSS为

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

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

但是当你申请

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

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

您可以检查的jsfiddle链接，看看自己的文本的位置如何在这两种风格http://jsfiddle.net/sidarth1989/32szd39g/

Answer 2

还有一个方法是应用height: 100%;到body，html和div，然后申请position:relative全屏股利。如以下示例：

html, 
body { 
    height: 100%; 
} 

div { 
    height: 100%; 
    position: relative; 
} 

一个例子：http://jsfiddle.net/s04scj0m/1/

Answer 3

视口相关单位现在很好支持不同...所以你可以做这个：

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

请看这里： https://www.w3.org/TR/css3-values/#viewport-relative-lengths