Question

在html＆amp;中创建全屏div时css有两个主要选择：

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

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

一方面有什么优势，还是可以互换使用？

Answer 1

视口相对单位现在得到了很好的支持......所以你可以这样做：

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

Answer 2

两者都产生相同的效果，即具有全屏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 3

创建全屏div的另一种方法是将height: 100%;应用于body，html和div，然后将position:relative应用于完整屏幕div。如下例所示：

html,
body {
    height: 100%;
}

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