爲什麼CSS高度100％不適用於正常的div？

這是我簡單的代碼爲什麼CSS高度100％不適用於正常的div？

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      div{height:100%;width:100%;background:red;position:relative;} 
     </style> 
    </head> 
    <body> 
     <div></div> 
    </body> 
</html>

CSS高度100％沒有申請DIV。

我知道一些其他的CSS代碼來獲取此。但爲什麼這個代碼不工作。如何在不使用任何腳本的情況下處理高度100％和寬度100％。

來源

2013-07-02 Natesan

對於%的工作，你需要設置高度爲parent element以及。

集html, body {height: 100%}

從文件 -

的計算相對於所述包含塊的高度。如果包含塊的高度不是明確指定的，則該值計算爲自動。根元素（例如）上的百分比高度相對於包含塊的初始（其尺寸等於視口的尺寸）。

檢查更多關於這在 - MDN Percent Doc

所以你的情況，你可以這樣做 -

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      html,body{height:100%;} 
     div{height:100%;width:100%;background:red;position:relative;} 
     </style> 
    </head> 
    <body> 
     <div></div> 
    </body> 
</html>

來源

2013-07-02 03:48:34 swapnesh

感謝。正是我想要的。 – Natesan

你可以做到這一點使用position:aboslute;

jsFiddle

div { 
    background:red; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 
body { 
    background-color:blue; 
}

或者您也可以將html和body的高度也設爲100％，如果走這條路線一定要從身上剝下邊距。

jsFiddle (with margin, notice scrollbars)
jsFiddle (without margin)

html, 
body { 
    height:100%; 
    margin: 0; 
}

來源

2013-07-02 03:50:42

爲什麼CSS高度100％不適用於正常的div？

回答

相關問題