爲什麼100vh不能填滿整個頁面？

Question

我目前正在使用React，並且遇到問題，要求div等於頁面高度的100％。最初，我有一個問題，總是有大約24px的身體上方的空白空間。無論如何，我都無法適應它。我最終用這個對我app.css（復位）

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
} 

它固定的問題，不過，100％或100vh測量不總的觀點實際上等於100％。這裏的頁面截圖：

https://gyazo.com/3407b6bd0032f402f3bb97acdb725e40

藍格是充滿100vh一個div。然而，它並沒有完全填滿這個頁面。我也嘗試過100％。

藍格：

.loginWrapper { 
    margin-left: 260px; 
    height: 100vh; 
    background-color: #29B6F6; 
} 

我注意到html對其有這樣的造型，但即使除去沒有變化是顯着的：

html { 
    box-sizing: border-box; 
} 

如果有人能解釋一下這個現象，我將非常感激。如果您需要任何額外信息，請告訴我。謝謝！

Answer 1

body標籤上有默認margin，約爲8px。既然你提到它是關於24px，所以我想多餘的空白距離可能是從collapsing margins。例如<div>內有<h1>標籤，默認margin約爲22px，h1顯示在容器外，也可以是任何其他標題標籤，或者p,ul等，其中的默認邊距來自瀏覽器。下面的簡單演示，請參見粉色區域，即邊距。

body {background:pink;} 
 
div { 
 
    height: 100vh; 
 
    background-color: #29B6F6; 
 
}

<div> 
 
    <h1>Test</h1> 
 
</div>

你可以只重置這些margin到0來解決這個問題，並使用padding而不是爲間距。或者，在容器etc上應用overflow:hidden;。

body {background:pink;} 
 
body, h1 { 
 
    margin: 0; 
 
} 
 
div { 
 
    height: 100vh; 
 
    background-color: #29B6F6; 
 
}

<div> 
 
    <h1>Test</h1> 
 
</div>

Answer 2

你將不得不如果來自HTML和其他頂級標籤應用到重置基本margin和padding。

body, html {margin: 0;padding: 0;} 

或者只是使用類似reset.css

http://meyerweb.com/eric/tools/css/reset/