IE 11：最小高度的元素：100vh 将导致滚动条

Question

我已经阅读了很多关于 IE 11 with display: flex 和 min-height 的帖子，但没有找到我的答案。

我有一个正常的<div> min-height: 100vh; . 在那个<div>我有另一个带有margin-bottom: 5px;元素margin-bottom: 5px; . 现在整个外部<div>在 5px 底部有一个滚动条和一个透明边框。

当我增加保证金时，底部的差距也会增加。

例子：

<div class="layout">
   <div class="panel">
      Some content
   </div>
</div>

 body { margin: 0; } .layout { min-height: 100vh; background: orange; } .panel { margin-bottom: 40px; background: white; border-radius: 5px; padding: 5px; }

 <div class="layout"> <div class="panel"> Panel </div> </div>

现在我制作了代码截图，我发现它在 Chrome 中也出错了。

我希望你理解我，但如果你需要更多信息，请询问。 我希望能找到答案！

谢谢你，罗纳德。

Answer 1

您的问题是因为边距崩溃，它可以通过不同的方式修复。

根据您的情况，最简单的方法是使用 overflow: hidden for .layout：

.layout {
  min-height: 100vh;
  background: orange;
  overflow: hidden;
}

您还可以在 .layout 上使用 padding-bottom 而不是 .panel 上的 margin-bottom 来避免边距问题。

另一种选择可能是像这样清除 .layout ：

.layout:before,
.layout:after {
    content: ' ';
    display: table;
}