控制行伸缩框中的高度扩展答案

【问题标题】：Controlling height expansion in a row flex box控制行伸缩框中的高度扩展
【发布时间】：2016-10-18 02:11:08
【问题描述】：

我对弹性盒子很困惑。这是我现在的布局：

还有代码：

<html>
<head>
    <style>
        /* flex boxes */
        .interblock{background:gray;height:100%;display:flex;flex-flow:row wrap;}
        .subrect{flex:1 90%;}
        .labelrect{flex:0 1 10%;}
        .footrect{flex:1 100%;background:yellow;height:auto;}
        .topleft{flex:0 1 50%;height:auto;background:green;}
        .topright{flex:0 1 50%;height:auto;background:red;}
    </style>
</head>

<body>
    <div class='interblock'>
        <div class='topleft'>
            topleft
        </div>    
        <div class='topright'>
            topright
        </div>
        <div class='labelrect' style='background:coral'>labelrect</div>
        <div class='subrect' style="background:orange">subrect</div>    
        <div class='labelrect' style='background:cyan'>labelrect</div>
        <div class='subrect' style="background:blue">subrect</div>      
        <div class='footrect'>
            footer
        </div>
    </div>
</body>
</html>

这个布局几乎是正确的。问题是我希望 subrects/labelrects 的中心块使用页眉和页脚未使用的高度的 100%。可能有任意数量的子矩形/标签矩形，它们都应该具有相同的高度。我不确定如何指定考虑页眉和页脚内容的扩展高度。如何让 labelrect/subrect 块的高度为 100% - 页眉 - 页脚？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您需要更改一些标记。在这里，我创建了 2 个包装器，1 个用于 top，1 个用于 middle。

提供top 和footrect flex: 0 使它们按内容大小，middle 具有flex: 1 以填充其余空间。

/* flex boxes */

html,
body {
  margin: 0;
}
.interblock {
  background: gray;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.top,
.footrect {
  flex: 0;
}
.top {
  flex-basis: auto;
  display: flex;
}
.middle {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.subrect {
  flex: 1 90%;
}
.labelrect {
  flex: 0 1 10%;
}
.footrect {
  background: yellow;
}
.topleft {
  flex: 1;
  background: green;
}
.topright {
  flex: 1;
  background: red;
}

<div class='interblock'>
  <div class='top'>
    <div class='topleft'>
      topleft<br><br>
    </div>
    <div class='topright'>
      topright
    </div>
  </div>
  <div class='middle'>
    <div class='labelrect' style='background:coral'>labelrect</div>
    <div class='subrect' style="background:orange">subrect</div>
    <div class='labelrect' style='background:cyan'>labelrect</div>
    <div class='subrect' style="background:blue">subrect</div>
  </div>
  <div class='footrect'>
    footer<br><br>
  </div>
</div>

【讨论】：