为什么当 html 的高度设置为 100% 时背景图像会完全显示？ [复制]

Question

我正在观看Traversy Media 的this 视频，其中他展示了如何制作视差网站。在this 点，他选择了html 以及body 标记。我认为可能有什么区别，并且添加带有 body 标签的 html 将是多余的，因为 html 中只有 body 和 head，并且由于我们正在设置 body 样式，因此我们想要设置样式的所有内容都可以通过选择 body 来设置样式。所以我最初没有在我的代码中写“html”，结果：背景图像只是覆盖了元素的背景，而额外的部分被隐藏了（根据我的代码，这应该是预期的，但我想知道为什么我们的结果不同。然后我意识到我的代码正在按应有的方式工作，而他的工作方式不同）。然后我意识到选择body和选择html之间是有区别的（我仍然不知道区别）。所以我在body之后编写了选择html的代码，并将html的高度设置为100%。现在我得到了视频中显示的内容。但我不明白怎么做。据我所知，这不应该有所作为，因为“body”在代码中将其高度设置为“100%”。当我删除 body 的高度时，它就像以前一样工作，即背景图像仅覆盖元素，即使 html 的高度设置为 100%。我也不明白设置html和body高度的目的。默认情况下它们不覆盖整个视口吗？

（这是我的第一个问题，如果我需要对问题进行任何更改以使其可以回答，请告诉我）

编辑： 已添加链接，在第一个代码 sn-p 上添加“.pimg1, .pimg2, .pimg3{background-attachment: fixed;}”，添加第二个代码 sn-p（预期结果但不希望出现）

我的代码使它按照我的意图工作（期望但不可理解）（Preview）：

   body{
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color:#666;

}

html{
    height: 100%;
}

.pimg1, .pimg2, .pimg3{
    background-attachment: fixed;
}

.pimg1{
    background-image:url('../img/image1.jpg');
    min-height: 100%;
}

.pimg2{
    background-image:url('../img/image2.jpg');
    min-height: 400px;
}

.pimg3{
    background-image:url('../img/image3.jpg');
    min-height: 400px;
}

我最初编写的代码（预期但不受欢迎）(Preview)

body{
    margin: 0;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color:#666;
    height: 100%;
}



.pimg1, .pimg2, .pimg3{
    background-attachment: fixed;
}

.pimg1{
    background-image:url('../img/image1.jpg');
    height: 100%;
}

.pimg2{
    background-image:url('../img/image2.jpg');
    min-height: 400px;
}

.pimg3{
    background-image:url('../img/image3.jpg');
    min-height: 400px;
}

p{
    font-size:30px;
}

已解决：我正在编辑容器 div 的高度，并认为我只是在编辑背景图像的高度。我太不合逻辑了。我现在知道了。谢谢https://stackoverflow.com/users/897416/charles 和https://stackoverflow.com/users/8620333/temani-afif

Answer 1

如果您没有定义html 的高度，而是在body 上定义一个百分比高度，那么该值将计算为auto。

来自height (MDN)：

百分比是根据生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为 auto。根元素上的百分比高度是相对于初始包含块的。

或者，您可以使用视口单位（例如，vh）。例如：

.pimg1 {
  background-image: url("../img/image1.jpg");
  min-height: 100vh;
}

...那么您无需在html 或body 上定义高度。

• 见CSS values and units (MDN)