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