Question

我正在尝试制作一个占据视口高度的背景图像。我注意到一些奇怪的行为，我希望有人会解释。所以我只是

<body>
    <div class="main">
        <header class="header"></header>
    </div>
</body>

现在我想让标题有一个背景图像，它是视口的全高。因此，我做以下

html,
body {
    width: 100%;
    height: 100%;
}

.header{
    background: url("../images/1.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
}

现在，当我这样做时，我得到一个空白页面。现在这是我试图理解的部分。如果我将高度更改为100vh则可行。但是，如果我将其保留在100%并删除带有类main的div，则可以正常工作。

现在我知道它将是其父标记的100％，但是具有类main的div没有指定高度，所以不应该继承100％的body标记，它占用整个视口？显然，我可以给主要100％的高度然后一切都按预期工作，只是想知道为什么它没有指定高度时从身体获得它。还想知道为什么100vh有效？

任何建议表示赞赏。

由于

Answer 1

您的.main容器CSS缺失

.main {
    width: 100%;
    height: 100%;
}

html,
body {
    width: 100%;
    height: 100%;
}

.main {
	width: 100%;
    height: 100%;
}
.header{
    background: url("https://placeimg.com/1000/1000/any");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
}

<div class="main">
 <header class="header"></header>
</div>

标题填充其直接父级：main，如果你没有设置这个div来填充那个问题的正文。

在正文中将边距和填充设置为0也是个好主意：

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

了解全高背景图像的行为

1 个答案: