Question

请考虑以下代码段：

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元素以绿色填充整个视口，顶部有一个粉红色的section元素。

现在，假设你想做一些非常简单的事情，比如在section元素中设置一个边距：style="min-height: 50px; background-color: pink; margin-bottom: 10px;"。出乎意料的是，html元素中的蓝色条带出现在视口的底部。

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 有更好的解决方案吗？（即：更直观，更易读）

Answer 1

您正面临保证金折叠问题。你应用于你的部分的底部边缘是与身体的底部边缘碰撞，因此它应用于身体而不是部分。

您可以阅读here：

块的顶部和底部边距有时会合并   （折叠）成一个边距，其大小是最大的   个人利润（或者只有其中一个，如果它们相等），a   行为称为保证金崩溃。

保证金崩溃发生在三个基本情况中：

相邻的兄弟姐妹

父母和第一个/最后一个孩子

空块

这就是为什么在你的情况下你有10px的保证金底部将滚动添加到你的页面，因为正文有一个min-height:100vh

＆＃13;

html {
  margin: 0;
  padding: 0;
  background-color: blue;
}

body {
  margin: 0;
  padding: 0;
  background-color: green;
  min-height: 100vh;
}

＆＃13;

<section style="min-height: 50px; background-color: pink;margin-bottom: 10px;"></section>

＆＃13;

要避免此类行为，您只需避免使用collpase边距。所以你可以像你一样包含一个小填充或边框，然后不要忘记添加box-sizing:border-box以避免更改高度并使用calc。

＆＃13;

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;
}

＆＃13;

<section style="min-height: 50px; background-color: pink;margin-bottom: 10px;"></section>

＆＃13;

您也可以使用flex，因为没有与flex 的边距匹配（请查看下面的链接了解更多方法）：

＆＃13;

html {
  margin: 0;
  padding: 0;
  background-color: blue;
}

body {
  margin: 0;
  padding: 0;
  background-color: green;
  min-height: 100vh;
  display:flex;
  flex-direction:column;
}

＆＃13;

<section style="min-height: 50px; background-color: pink;margin-bottom: 10px;"></section>

＆＃13;

可能有助于您获取更多信息的一些链接：

https://css-tricks.com/what-you-should-know-about-collapsing-margins/

How do I uncollapse a margin?

CSS margin terror; Margin adds space outside parent element

Margin on child element moves parent element

Margin collapsing in flexbox

Answer 2

我也不知道为什么会出现这种行为，但您可以尝试使用以下CSS来克服这种情况：

body {margin: 0; padding: 0; background-color: green; position:absolute; left:0; top:0; right:0; bottom:0; overflow:auto;}

,,填充，边距，100vh和calc（）

2 个答案: