质朴Flexbox的高度

Question

这是一个非常简单的结构，我可以不使用Flexbox的实现。

我有一个报头和主体我有一个长（高）元件内的主体元件和后，我有身体内的小页脚。我希望内容可以滚动并且页脚始终可见。

我将所有的东西都设置为使用flexbox，我使用flex-direction: column来实现垂直定位，以及flex: 1使用高度未定义的元素占据剩余空间。

奇怪的是，我固定高度为50像素的标头只有20像素高，内容根本不可滚动，或者更确切地说，它与小小的页脚（绿色）并不是我想要的。 ..

DEMO HERE

.flex { display: flex; } 
 
.flex1 { flex: 1; } 
 
.col { flex-direction: column; } 
 
.red { background-color: red; } 
 
.blue { background-color: blue; } 
 
.green { background-color: green; } 
 
.yellow { background-color: yellow; } 
 
.pad { padding: 10px 15px; } 
 
.h50 { height: 50px; }

<div class="flex col" style="height: 100vh;"> 
 
    <div class="red h50"> 
 
    Wtf? 
 
    </div> 
 
    <div class="blue flex1 pad"> 
 
    <div class="flex col" style="height: 100%"> 
 
     <div class="yellow flex1" style="overflow: auto;"> 
 
     <div style="height: 1500px"> 
 
      Long content here 
 
     </div> 
 
     </div> 
 
     <div class="green h50"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

使用高度与％的内部元素结合Flexbox，就不是一个好主意，因为它会产生问题跨浏览器。

使用Flexbox的一路，这里通过更新这两个要素类，在这里我删除height: 100%并添加flex到blue所以它的孩子将填补其母公司的高度，并flex1孩子，因此将填补其母公司的宽度。

<div class="blue flex1 pad flex"> 
    <div class="flex flex1 col"> 

还增加margin: 0到body

栈片断

body { margin: 0; } 
 
.flex { display: flex; } 
 
.flex1 { flex: 1; } 
 
.col { flex-direction: column; } 
 
.red { background-color: red; } 
 
.blue { background-color: blue; } 
 
.green { background-color: green; } 
 
.yellow { background-color: yellow; } 
 
.pad { padding: 10px 15px; } 
 
.h50 { height: 50px; }

<div class="flex col" style="height: 100vh;"> 
 
    <div class="red h50"> 
 
    Wtf? 
 
    </div> 
 
    <div class="blue flex1 pad flex"> 
 
    <div class="flex flex1 col"> 
 
     <div class="yellow flex1" style="overflow: auto;"> 
 
     <div style="height: 1500px"> 
 
      Long content here 
 
     </div> 
 
     </div> 
 
     <div class="green h50"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

---

更新根据COMME NT，其中火狐似乎需要min-height: 0的blue元素。

对于Flex项目，其默认min-height/width值为auto，它阻止他们低于其内容的尺寸缩小，所以更改为0解决了。

栈片断

body { margin: 0; } 
 
.flex { display: flex; } 
 
.flex1 { flex: 1; } 
 
.col { flex-direction: column; } 
 
.red { background-color: red; } 
 
.blue { background-color: blue; } 
 
.green { background-color: green; } 
 
.yellow { background-color: yellow; } 
 
.pad { padding: 10px 15px; } 
 
.h50 { height: 50px; } 
 
.mh { min-height: 0; }

<div class="flex col" style="height: 100vh;"> 
 
    <div class="red h50"> 
 
    Wtf? 
 
    </div> 
 
    <div class="blue flex1 pad flex mh"> 
 
    <div class="flex flex1 col"> 
 
     <div class="yellow flex1" style="overflow: auto;"> 
 
     <div style="height: 1500px"> 
 
      Long content here 
 
     </div> 
 
     </div> 
 
     <div class="green h50"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>