为什么<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>元素没有填充窗口？

回答

相关问题