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

Question

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

我有一个正常的 <div> 和一个 min-height: 100vh;。在那个 <div> 中，我有另一个带有 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

您的问题是由 margin collapsing 引起的，可以通过不同的方式解决。

根据您的情况，最简单的方法是使用 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;
}

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

IE 11: Element with min-height: 100vh will cause scrollbar

html

css

scroll

internet-explorer-11