如何在动态高度的Flexbox中进行div拉伸? [英] How do I make a div stretch in a flexbox of dynamic height?
问题描述
我正在尝试使用flexbox进行堆叠布局.理想情况是这样的:
I'm trying to make a stacked layout using flexbox. Ideally it'd look like this:
其中底部(蓝色)div是固定高度 250px
,顶部div是 n-250
,其中 n
是父容器的大小-换句话说,顶部应伸展以填充容器.
where the bottom (blue) div is a fixed height of 250px
and the top div is n-250
, where n
is the size of the parent container--in another words, the top should stretch to fill the container.
当我有容器高度时,我对如何执行此操作有一些想法,但我宁愿避免在运行时确定该变量.
I have some idea of how to do this when I have the container height, but I'd rather avoid having to determine that variable at runtime.
已经以各种形式详细讨论了此问题,但似乎没有一个解决此简单用例的问题(
This issue has been covered at length in various forms , but none seem to address this simple use-case (here, for example, works with a header/content/footer, but ostensibly not with just content/footer).
我已使用示例设置了 codepen .
推荐答案
我认为这是使用 flex-grow:1;
回答您的问题的方法.希望对您有帮助
I think this is answering your question using the flex-grow: 1;
. hope it helps
https://jsfiddle.net/BradChelly/ck72re3a/
.container {
width: 100px;
height: 150px;
background: #444;
display: flex;
flex-direction: column;
align-content: stretch;
}
.box1 {
width: 100%;
background: steelblue;
flex-grow: 1;
}
.box2 {
height: 50px;
width: 100%;
background: indianred;
}
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
这篇关于如何在动态高度的Flexbox中进行div拉伸?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!