Question

我正在写一个网站，我遇到了一个奇怪的问题。

#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>

我的问题是，当我在google chrome中加载页面时（我还没有尝试过其他浏览器），

顶部有一个神秘的白色空间，我无法摆脱
<html>元素未填充浏览器高度，因此
设置图片height="100vh"使其填充<html>元素，但不填充页面。

我需要的是<html>填充页面以及顶部的空白区域消失。

修改

我使用meyerweb.com/eric/tools/css/reset上的代码消除了空白。

Answer 1

使用视口单元时，无需担心height="100vh"元素的高度/宽度。但是，您应该将内联body{margin:0;}移动到CSS中。而且我没有看到任何“神秘的白色空间在顶部”，因为你已经设置img { height:100vh; }，如果你仍然看到它可能是由你的其他风格引起的。

#Text

请注意，CSS类/ ID名称区分大小写，#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标记，因为它在浏览器中有一些默认的顶部和底部{{1}}。

为什么元素没有填满窗口？

1 个答案: