使 div 适合剩余高度答案

【问题标题】：Make div fit remaining height使 div 适合剩余高度
【发布时间】：2016-08-20 20:57:38
【问题描述】：

我有以下 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 中效果不佳。

【问题讨论】：

它在 IE11 中应该可以正常工作。你可以发布一个例子吗？唯一的问题是 IE10，您必须使用 -ms- 前缀。
如果你愿意使用 flex，看起来像 stackoverflow.com/questions/25098042/… 的副本
Flexbox 在 IE11 中运行良好......
请don't duplicate your questions - 如果您的问题已作为副本关闭，则通过复制+粘贴再次询问不是解决问题的好方法。

标签： javascript jquery html css flexbox

【解决方案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(); });

【讨论】：

【解决方案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>

【讨论】：