如何在动态高度的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屋！