使 div 适合剩余高度

Posted 2023-03-07

【中文标题】使 div 适合剩余高度

【英文标题】：Make div fit remaining height

【发布时间】：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，看起来像 ***.com/questions/25098042/… 的副本

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

请don't duplicate your questions - 如果您的问题已作为副本关闭，则通过复制+粘贴再次询问不是解决问题的好方法。

【参考方案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>