Question

在我做的代码示例中：

将所有边距/填充重置为0
将身高设置为100％
将弹性容器高度设置为96％
将弹性容器margin-top设置为2％

现在这给了我一个关于身体的滚动，即使柔性容器高度+ margin-top只达到98％，所以我的问题是，我不能使用margin-top就是这样，哪里做额外的空间来自迫使身体滚动？

将身体设置为overflow:hidden会移除滚动，但这感觉更像是一个创可贴而不被视为一种解决方案（除非这是＆＃34;行为 - 设计＆＃34;需要在这种情况下）。

修改

如删除弹性容器上的margin-top，然后在主体上设置padding-top: 2%;或在容器上使用position: relative; top: 2%;或使用absolute: position;，我可以使其工作正如预期的那样，但这里的情况是margin-top: 2%没有做到的原因。

＆＃13;

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0
}
html, body {
  background-color: gray;
  height: 100%;
}
.outer {
  display: flex;
  flex-flow: column;
  margin: 0 auto;
  height: 96%;
  width: 50%;
  margin-top: 2%;
}
.top {
  background-color: lightgray;
}
.middle {
  background-color: darkgray;
}
.the-rest {
  flex: 1 0 auto;
  background-color: lightgray;
}

＆＃13;

<div class="outer">
  <div class="top">
    top
  </div>
  <div class="middle">
    middle
  </div>
  <div class="the-rest">
    content
  </div>
</div>

＆＃13;

Answer 1

这是因为百分比边距是基于包含块/元素的 width ...在这种情况下是正文。

W3C Spec

MDN

相对于包含块宽度的<percentage>。允许使用负值。

Answer 2

我通常在html和body上使用vh和vw。在这个演示中，我只应用vh，因为它看起来像一个垂直方向的演示。我也制作了正文和html position: relative。 vw和vh有一个实际测量的长度，其他元素（:: root的子节点）实际上可以将其相对测量值设置为100％。我使用position: relative因为它使html，body严格地位于视口内，而viewport单位保持身体，html在边缘处为100vh和100vw。

<强>更新

我认为这种行为归因于collapsing-margins因此，如果存在不合逻辑的margin-top行为，请记住这一点。有几个非常具体的情况导致这种奇怪的行为，并且也有一些解决方案。这些情况的解决方案如下：

body，html {height：100vh; } / *没有相对或绝对定位* /
.outer {min-height：100％; margin-top：-2％; } / *它解释了正数编号的margin-top无效，但负值有效但不像正常的负值！ O_0

＆＃13;

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html,
body {
  position: relative;
  background-color: gray;
  height: 100vh;
}
.outer {
  display: flex;
  flex-flow: column;
  margin: 0 auto;
  min-height: 100%;
  width: 50%;
  margin-top: - 2%;
  border-top: 0;
}
.top- {
  background-color: lightgray;
}
.middle {
  background-color: darkgray;
}
.the-rest {
  flex: 1 0 auto;
  background-color: lightgray;
}
.marker {
  position: absolute;
  outline: 1px solid red;
}

＆＃13;

<span class="marker" style="top: 0; left: 0;">top:0|left:0</span>
<span class="marker" style="top: 0; right: 0;">top:0|right:0</span>
<div class="outer">

  <div class="top">
    top
  </div>
  <div class="middle">
    middle
  </div>
  <div class="the-rest">
    content
  </div>
</div>
<span class="marker" style="bottom: 0; left: 0;">bottom:0|left:0</span>
<span class="marker" style="bottom: 0; right: 0;">bottom:0|right:0</span>

＆＃13;

如何使弹性容器不强制在身体上滚动

2 个答案: