質樸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>