爲什麼<html>元素沒有填充窗口？

我正在寫一個網站，並有一個奇怪的問題。爲什麼<html>元素沒有填充窗口？

#Text { 
 
    margin-left:15vw; 
 
    width:70vw; 
 
    background-color:white; 
 
    opacity:0.8; 
 
    vertical-align:center; 
 
} 
 
body { 
 
    margin:0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>SomeTitle</title> 
 
    <link rel="stylesheet" type="text/css" href="./main.css"> 
 
</head> 
 

 
<body> 
 
    <img src="someUnimportantImage.jpg" height="100vh"> 
 
    <div id="text"> 
 
    <p>Text</p> 
 
    <p>More text</p> 
 
    <p>Even more text</p> 
 
    </div> 
 
</body> 
 

 
</html>

我的問題是，當我打開我的頁面在谷歌瀏覽器（我還沒有嘗試過其他的瀏覽器），

有在頂部的神祕空白我無法擺脫
<html>元素沒有填充瀏覽器高度，因此
設置圖像height="100vh"使其填充<html>元素，但不是頁面。

我需要的是爲<html>填充頁面，並在頂部的空白處消失。

編輯

我得到的空白，通過使用代碼在meyerweb.com/eric/tools/css/reset到disapear。

來源

2015-07-21 thesecretmaster

爲了避免像這樣的小型跨瀏覽器錯誤，最好使用CSS重置。 http://meyerweb.com/eric/tools/css/reset/ –

當您使用視口單位時，您不需要擔心<html>元素的高度/寬度。但是，您應該將內嵌的height="100vh"移動到CSS中。因爲你已經設置了body{margin:0;}，所以我沒有在頂部看到任何「神祕的空白空間」，如果你仍然看到它，可能是由其他風格造成的。

img { 
    height:100vh; 
}

並且要注意，CSS類/ ID名稱是區分大小寫的，#Text和#text是不一樣的。

body { 
 
    margin:0; 
 
} 
 
img { 
 
    height:100vh; 
 
} 
 
#text { 
 
    margin-left:15vw; 
 
    width:70vw; 
 
    background-color:white; 
 
    opacity:0.8; 
 
    vertical-align:center; 
 
}

<img src="//dummyimage.com/500"> 
 
<div id="text"> 
 
    <p>Text</p> 
 
    <p>More text</p> 
 
    <p>Even more text</p> 
 
</div>

編輯：白色空間可能會從<p>標籤，因爲它有一些默認的頂部，並從瀏覽器底部margin。

來源

2015-07-21 22:24:46 Stickers

爲什麼<html>元素沒有填充窗口？

回答

相關問題