<html> , <body> , padding, margin, 100vh 和 calc()答案

【问题标题】：<html> , <body> , padding, margin, 100vh and calc()<html> , <body> , padding, margin, 100vh 和 calc()
【发布时间】：2018-06-27 01:25:27
【问题描述】：

考虑以下代码sn-p：

html {
  margin: 0;
  padding: 0;
  background-color: blue;
}

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

&lt;section style="min-height: 50px; background-color: pink;"&gt;&lt;/section&gt;

正如预期的那样，body 元素以绿色填充整个视口，顶部有一个粉红色的 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;
}

&lt;section style="min-height: 50px; background-color: pink; margin-bottom: 10px;"&gt;&lt;/section&gt;

问题 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);
}

&lt;section style="min-height: 50px; background-color: pink; margin-bottom: 10px;"&gt;&lt;/section&gt;

但是，这个解决方案需要一个我不习惯的噱头。

问题 2 有没有更好的解决方案？（即：更直观，更易读）

【问题讨论】：

是我，还是在所有 3 个代码 sn-ps 中的视口底部没有蓝色条？对我来说，它们看起来完全一样

标签： html css

【解决方案1】：

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

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

【讨论】：

这段代码的问题是你失去了一些灵活性（尽管我在原始问题中没有提到这个约束）。例如：section元素高度增加，body元素不会随之增加，100vh后背景变为蓝色。
@MarkMessa 实际上，当内容增加时，正文滚动会相应出现。或者你可以试试 html {margin: 0;填充：0；背景颜色：蓝色；高度：100vh；}身体{边距：0；填充：0；背景颜色：绿色；最小高度：100%;}
“实际上当内容增加时，body 滚动会相应出现。” 奇怪的是，在我的浏览器中，body 元素保持固定为 100vh，而 html 随着部分内容的增加而增加（蓝色背景)。
"或者你可以试试html" html {height: 100vt} body {min-height: 100%}的问题是它不能解决section {margin-top: 10px}的蓝条问题或者当内容增加时section {min-height: 1500px} .

【解决方案2】：

您正面临margin-collapses 问题。您应用到部分的下边距与正文的下边距重叠，因此应用到正文而不是部分。

如你所见here:

块的顶部和底部边距有时会合并（折叠）成单个边距，其大小是最大的单个边距（或仅其中一个，如果它们相等），a 称为margin collapsing的行为。

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

相邻的兄弟姐妹

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

空块

这就是为什么在您的情况下，您有 10px 的边距底部将滚动添加到您的页面，因为 body 有一个 min-height:100vh

html {
  margin: 0;
  padding: 0;
  background-color: blue;
}

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

&lt;section style="min-height: 50px; background-color: pink;margin-bottom: 10px;"&gt;&lt;/section&gt;

为避免此类行为，您只需避免边距折叠即可。因此，您可以像以前一样添加一个小填充或边框，然后不要忘记添加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;
}

&lt;section style="min-height: 50px; background-color: pink;margin-bottom: 10px;"&gt;&lt;/section&gt;

您也可以使用 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;
}

&lt;section style="min-height: 50px; background-color: pink;margin-bottom: 10px;"&gt;&lt;/section&gt;

一些可以帮助您获取更多信息的链接：

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

【讨论】：

见jsbin.com/qekonaruka/1/edit?html,output。如果下边距在折叠，为什么浮动的黄色框会被section元素下边距的大小向下推？
@Alohci 好吧，我不知道我是否能很好地解释这一点:) 我也无法找到与 float 相关的类似问题......但它与此有关 请注意，已折叠的元素的位置不会影响正在折叠的其他元素的位置；仅在布置这些元素的后代时才需要顶部边框边缘位置。 您可以在此处阅读：w3.org/TR/CSS2/box.html#margin-properties
box-sizing: border-box; 这对于这个问题和其他几个问题非常有帮助。
只是为了记录，还有另一种有趣的方法来禁用边距折叠，需要更少的编码：padding: 0.1px
但是，由于可读性，禁用边距折叠的最佳方法似乎是使用 flexbox。