考虑以下代码片段:
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
background-color: green;
min-height: 100vh;
}<section style="min-height: 50px; background-color: pink;"></section>正如预期的那样，body 元素以绿色填充整个视口(viewport)，顶部有一个粉红色的 section 元素。
现在，假设您想做一些非常简单的事情，比如在 section 元素中设置边距:style="min-height: 50px; background-color: pink; margin-bottom: 10px;"。出乎意料的是，html 元素的蓝色 strip 出现在视口(viewport)底部。
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
background-color: green;
min-height: 100vh;
}<section style="min-height: 50px; background-color: pink; margin-bottom: 10px;"></section>问题 1) 为什么会出现这种行为？这对我来说没有意义。
纠正此行为的一种方法是在 body 元素中包括填充和 min-height calc() 调整:
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
padding-bottom: 1px;
background-color: green;
min-height: calc(100vh - 1px);
}<section style="min-height: 50px; background-color: pink; margin-bottom: 10px;"></section>但是，这个解决方案需要这样一个让我感到不舒服的噱头。
问题2有更好的解决方案吗？ (即:更直观，更易读)
最佳答案
您正面临边距崩溃问题。您应用于部分的底部边距与正文的底部边距重叠，因此它应用于正文而不是部分。
如您所见here :
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing.
Margin collapsing occurs in three basic cases:
Adjacent siblings
Parent and first/last child
Empty blocks
这就是为什么在你的情况下你有 10px 的底部边距可以将滚动添加到你的页面，因为 body 有一个 min-height:100vh
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
background-color: green;
min-height: 100vh;
}<section style="min-height: 50px; background-color: pink;margin-bottom: 10px;"></section>要避免这种行为，您需要简单地避免 margin to collpase。所以你可以像你做的那样包含一个小填充或边框然后不要忘记也添加 box-sizing:border-box 以避免改变高度并使用 calc .
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
background-color: green;
min-height: 100vh;
border-bottom:1px solid transparent;
/* OR padding-bottom:1px */
box-sizing:border-box;
}<section style="min-height: 50px; background-color: pink;margin-bottom: 10px;"></section>您也可以使用 flex，因为它不会与 flex 合并边距 (查看下面的链接了解更多方法):
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
background-color: green;
min-height: 100vh;
display:flex;
flex-direction:column;
}<section style="min-height: 50px; background-color: pink;margin-bottom: 10px;"></section>一些可以帮助您获取更多信息的链接:
https://css-tricks.com/what-you-should-know-about-collapsing-margins/
CSS margin terror; Margin adds space outside parent element
关于html - <html> 、 <body> 、填充、边距、100vh 和 calc()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48313396/