使div适应剩余高度

Question

我有以下div元素

<div class="top">
   <div class="inner1"></div>
   <div class="inner2"></div>
   <div class="inner3"></div>
</div>

这是CSS代码：

.top { 
    height: 100vh;
}

.div1 {
    min-height: 215px;
    box-sizing: border-box;
    height: 30vh;
}

.div2 { 
    box-sizing: border-box;
    min-height: calc(100vh - 30vh - 265px);
    padding-top: 2.5em;
    margin-top: 0;
    display: table;
}

.div3 {
    min-height: 265px;
    box-sizing: border-box;
    background: white;
    display: table;
    width: 100%;
    font-weight: 700;
    padding-bottom: 42px;
}

我不想使用calc(100vh - 30vh - 265px)来设置div 2的最小高度。我该如何让它获取剩余的高度（即div2的高度 = 100vh - div1的高度 - div2的高度）？我猜flex可能在这里有用，但我不太确定如何使用它。非常感谢您的帮助。请注意：在将其标记为重复之前，请注意：我尝试使用flex，但在IE11��效果不佳。

- J K

---

它应该在IE11中正常工作。你能发一个例子吗？唯一的问题可能是在IE10中，你必须使用-ms-前缀。 - Kyle Hawk

如果你愿意使用flex，这似乎是一个重复的问题 https://dev59.com/QV8f5IYBdhLWcg3wD-8v#25098486 - G-Cyrillus

Flexbox在IE11中运行良好... - Paulie_D

请不要重复提问 - 如果您的问题被关闭为重复，通过复制粘贴再次提问并不是一个好的解决方式。 - halfer

Answer 1

不知道是否是最好的想法，但为了克服跨浏览器限制，我通常使用JavaScript进行重新计算。我编写JavaScript函数，然后在窗口调整大小和加载时触发它。

// some jQuery
function adjustHeight() {
var fullHeight = $(window).height();

var neededHeight = fullHeight - fullHeight*0.3 - 263;

$('.div2').css('min-height', neededHeight + 'px');

}


$(document).ready(function(){ adjustHeight(); });

- Nick Surmanidze

Answer 2

除了 Flex，display:table 属性也可帮助旧版浏览器。

在这种情况下，高度会变成最小高度

.top {
  height: 100vh;
  display: table;
  width: 100%;
}
.top>div {
  display: table-row;
}
.inner1 {
  min-height: 215px;/* becomes useless */
  box-sizing: border-box;
  height: 30vh;
  background: tomato;
}
.inner2 {
  box-sizing: border-box;
  padding-top: 2.5em;/* i'll get squeezed here */
  margin-top: 0;/* useless, border-spacing is to be used */
  background: turquoise;
}
.inner3 {
  height: 265px;
  box-sizing: border-box;
  background: yellow;
  display: table;
  width: 100%;
  font-weight: 700;
  padding-bottom: 42px;/* ? :) */
}

<div class="top">
  <div class="inner1">1</div>
  <div class="inner2">run me in full page to see how i behave :)</div>
  <div class="inner3">3</div>
</div>

- G-Cyrillus