Question

我正在尝试使一种既可以在Internet Explorer也可以在Firefox中使用的布局。我在这两种浏览器中都遇到了一些问题，但目前最大的问题是div高度。

我的顶部有一个固定的div，高度为92px。该页面由多个div组成。第一个div必须高100vh。我设置了填充来补偿第一个固定div。其他div应该为100vh-92px高。

在Firefox中，这可以正常工作。在Internet Explorer 11中，div被折叠。某些div可能只有少量文本，这就是为什么它们需要最小高度的原因。如果他们有很多文字，则需要延伸以适合内容。

我在做什么错了？

body {
  margin: 0;
}

.fixeddiv {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 92px;
  width: 100%;
  background: red
}

.firstdiv {
  min-height: 100vh;
  background: orange;
  width: 100%;
  padding-top: 92px;
}

.otherdiv1 {
  min-height: calc(100vh - 75px);
  background: blue;
  width: 100%;
}

.otherdiv2 {
  min-height: calc(100vh - 75px);
  background: red;
  width: 100%;
}

<div class="fixeddiv"></div>
<div class="firstdiv"></div>
<div class="otherdiv1"></div>
<div class="otherdiv2"></div>

为什么具有最小高度集的元素在IE11中会崩溃？

0 个答案: