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

Question

在html＆css中创建全屏div ，有两个主要选项：

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

或者： #myDiv{position: absolute; top:0px; bottom:0px; 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

Answer 3

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

html,
body {
    height: 100%;
}

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

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