为什么这个 css 示例会这样？答案

【问题标题】：Why is this css example behaving this way?为什么这个 css 示例会这样？
【发布时间】：2020-11-26 08:05:50
【问题描述】：

为什么这个简单的 html/css 不符合我的预期？

HTML

<!DOCTYPE html>
<html>
    <header>
        <link rel="stylesheet" href="site.css">
    </header>
    <body>
        <div id="file-explorer"></div>
        <div id="file-queue"></div>
    </body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 2rem;
    background-color:blue;
}

#file-explorer {
    height: 50vh;
    background-color: red;
}

#file-queue {
    height: 50vh;
    background-color: green;
}

结果：

问题：

首先，我不明白正文标签如何接收边距参数。它不能在视口之外生长。不应该只有填充对身体有效吗？我使用了填充，但得到了相同的结果。

另一方面，我使用的是 box-sizing = border-box。所以，我提供的尺寸应该包含边距/填充/边框。因此，如果我说我希望我的两个 div 占视口的 50%，为什么我得到的结果比视口大（你可以看到显示了一个垂直滚动框）？

我希望在两个 div 周围都有一个边距，并且所有这些都完全适合浏览器视口。

【问题讨论】：

标签： html css

【解决方案1】：

您没有按照应有的方式设置高度和所需的间隙。

用于height% 百分比，它将遵循您设置的框大小，（vh/vw/vmin/vmax 正在使用视口大小）。
使用padding 而不是margin，它将遵循您设置的框大小（如果设置为border-box，则padding 和border 将包含在计算中，而不是margin） em>。

如果对您有帮助，请提供固定示例：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  padding: 2rem;
  height: 100vh;/* vh here is okay */
  background-color: blue;
}

body {
  height: 100%;/* it will use the 100% of height avalaible inside the border and padding of the parent */
}

#file-explorer {
  height: 50%;/* half-height of the parent, not the viewport */
  background-color: red;
}

#file-queue {
  height: 50%;
  background-color: green;
}

<!DOCTYPE html>
<html>
<header>
  <link rel="stylesheet" href="site.css">
</header>

<body>
  <div id="file-explorer"></div>
  <div id="file-queue"></div>
</body>

</html>

【讨论】：

【解决方案2】：

首先，我不明白body标签如何接收边距参数。它不能在视口之外生长。不应该只是填充对身体有效？我使用了填充，但得到了相同的结果。

body 标签也是标签之一。所以它在html标签中。 body 标签在屏幕上展开，没有任何样式。当它得到margin时，body标签被收缩为与margin大小相同的厚度。

另一方面，我使用的是 box-sizing = border-box。所以，尺寸我提供的应该包含边距/填充/边框。因此，如果我说我希望我的两个 div 占视口的 50% 为什么我会得到结果大于视口（如您所见，垂直滚动框是显示）？

vh 是一个相对单位。当利率为 100% 时，就没有保证金的余地。所以边距也应该在 vh 中，如下例所示。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {    
    margin: 10vh;
    background-color:blue;
}

#file-explorer {
    height: 40vh;
    background-color: red;
}

#file-queue {
    height: 40vh;
    background-color: green;
}

<!DOCTYPE html>
<html>
    <header>
        <link rel="stylesheet" href="site.css">
    </header>
    <body>     
        <div id="file-explorer"></div>
        <div id="file-queue"></div>
    </body>
</html>

【讨论】：