Flexbox - 填充剩余空间

Question

我有一个像这样的基本flexbox布局..

body,html {
  height:100%;
  width:100%;

}

#container {
  width:100%;
  background:grey;
  display:flex;
  flex-direction:column;
}

.top {
  background:red;
  flex:1;
  padding:20px;
}

.bottom {
  background:yellow;
  flex:1;
  padding:20px;
}

<div id="container">
	<div class="top">
  Top Content
	</div>
	<div class="bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis, arcu vitae sollicitudin pellentesque, quam libero imperdiet urna, eu rhoncus lorem dolor sed neque. Donec ex risus, pretium ut maximus fringilla, euismod id mi. Phasellus ligula sem, iaculis ut urna eget, efficitur vulputate sem.
  </div>
</div>

我正在尝试使顶部div填充剩余空间，底部div是动态的，因此高度根据文本而变化。我的结果看起来像这样..

在这种情况下，flexbox是最好用的吗？

Answer 1

首先，您需要使容器占据垂直空间。 height: 100%;会做到这一点。

其次，如果你想让标题div 不是与下面的div相同，那么它们不应该都是flex: 1;，实际上你可能希望标题是flex: 0;

Answer 2

  

在这种情况下，flexbox是最好用的吗？

是的，在这种情况下使用flexbox是一个好主意。

为了达到理想的效果，据我所知，您需要在height: 100%上设置#container，以便它占用所有可用空间。然后在flex-grow: 0上设置.bottom，以便它不会增长。

所以你的CSS应该是：

#container {
  width:100%;
  height:100%;
  background:grey;
  display:flex;
  flex-direction:column;
}

.top {
  background:red;
  flex: 1 0 auto; // Grow, don't shrink
  padding:20px;
}

.bottom {
  background:yellow;
  flex: 0 0 auto; // don't grow, take up only needed space
  padding:20px;
}

Answer 3

容器未设置为100%高度。它不够高。将容器设置为height: 100%后，还必须为每个弹性项设置flex-basis。底部可以是flex: 1 1 auto，但顶部应为flex: 0 1 auto

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

#container {
  width:100%;
  height: 100%;
  background:grey;
  display:flex;
  flex-direction:column;
}

.top {
  background:red;
  flex:1 1 auto;
  padding:20px;
}

.bottom {
  background:yellow;
  flex:0 1 auto;
  padding:20px;
}

<div id="container">
	<div class="top">
  Top Content
	</div>
	<div class="bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis, arcu vitae sollicitudin pellentesque, quam libero imperdiet urna, eu rhoncus lorem dolor sed neque. Donec ex risus, pretium ut maximus fringilla, euismod id mi. Phasellus ligula sem, iaculis ut urna eget, efficitur vulputate sem.
  </div>
</div>