如何讓柔性物品的孩子填充父母身高的100％？

我有一個帶有標題（需要佔用整個頁面高度的20％）的簡單頁面和我想填充剩餘頁面高度（80％）的容器。如何讓柔性物品的孩子填充父母身高的100％？

問題是，我希望容器的每個孩子都是容器高度的100％（因此容器需要擴大到實際佔總頁面高度的80％）*有多少孩子在那裏。

是否有可能利用Flexbox，就使容器盛裝多種元素其中的每一個容器的總高度？

我不知道如何讓一個元素同時填補剩餘的空間，然後使用它作爲一個指標

無論如何，這裏是一個codepen demo - 簡單的html和d css如下：我的理想結果是，每個有色divs將是body的整個高度減去header高度，並且容器將擴展以容納物品。

任何想法將不勝感激。

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
header { 
 
    background: blue; 
 
    flex: 1; 
 
} 
 
div.holder { 
 
    flex: 5; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
div.one { 
 
    flex: 1; 
 
    background: green; 
 
} 
 

 
div.two { 
 
    flex: 1; 
 
    background: yellow; 
 
} 
 

 
div.three { 
 
    flex: 1; 
 
    background: red; 
 
} 
 

 
div.four { 
 
    flex: 1; 
 
    background: orange; 
 
}

<body> 
 
    <header> 
 
    </header> 
 
    <div class="holder"> 
 
    <div class="one"> 
 
     one 
 
    </div> 
 
    <div class="two"> 
 
     two 
 
    </div> 
 
    <div class="three"> 
 
     three 
 
    </div> 
 
    <div class="four"> 
 
     four 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-02-27 Startec

http://stackoverflow.com/q/33636796/3597276 –

DEMO

CSS

html, body { 
    height: 100%; 
    margin: 0; 
} 

header { 
    background: blue; 
    height:20% 
} 

div.holder { 
    height:80%; /* <------ make it of desired height */ 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
} 

div.holder > div { 
    min-height: 100%; /* <------ better to provide min-height */ 
} 

div.one { 
    flex: 1; 
    background: green; 
} 

div.two { 
    flex: 1; 
    background: yellow; 
} 

div.three { 
    flex: 1; 
    background: red; 
} 

div.four { 
    flex: 1; 
    background: orange; 
}

HTML

<body> 
    <header></header> 
    <div class="holder"> 
    <div class="one">one</div> 
    <div class="two">two</div> 
    <div class="three">three</div> 
    <div class="four">four</div> 
    </div> 
</body>

來源

2017-02-27 02:32:33 4dgaurav

你真的需要Flexbox的？
爲什麼不簡單使用視口值（vw，vh）？

html, body { 
 
    margin: 0; 
 
} 
 
header { 
 
    background: blue; 
 
    height: 20vh; 
 
} 
 
div.holder { 
 
    height: 80vh; 
 
} 
 

 
div.one { 
 
    background: green; 
 
    height: 100%; 
 
} 
 

 
div.two { 
 
    background: yellow; 
 
    height: 100%; 
 
} 
 

 
div.three { 
 
    background: red; 
 
    height: 100%; 
 
} 
 

 
div.four { 
 
    background: orange; 
 
    height: 100%; 
 
}

<body> 
 
    <header> 
 
    </header> 
 
    <div class="holder"> 
 
    <div class="one"> 
 
     one 
 
    </div> 
 
    <div class="two"> 
 
     two 
 
    </div> 
 
    <div class="three"> 
 
     three 
 
    </div> 
 
    <div class="four"> 
 
     four 
 
    </div> 
 
    </div> 
 
</body>

或者你可以用百分比值去，這幾乎是相同的。（但體和HTML需要有100％的高度）

html, body { height: 100%; } 
header { height: 20%; } 
.holder { height: 80%; } 
.holder > div { height: 100%; }

來源

2017-02-27 01:56:34 pol

如何讓柔性物品的孩子填充父母身高的100％？

回答

相關問題