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

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;
}