Question

我已经阅读了很多有关IE 11的显示信息：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造成的，它可以通过不同的方式解决。

根据您的情况，最简单的方法是使用溢出：.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的元素将导致滚动条

1 个答案: