Flexbox-填充剩余空间 [英] Flexbox - Fill remaining space

问题描述

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

I have a basic flexbox layout like this..

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是动态的，因此高度根据文本而变化.我的结果看起来像这样.

I am trying to make the top div fill the remaining space, the bottom div is dynamic so the height changes depending on the text. My result looks like this..

在这种情况下，flexbox是最好的选择吗?

Is flexbox the best thing to use in this situation?

推荐答案

在这种情况下，flexbox是最好的选择吗?

Is flexbox the best thing to use in this situation?

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

Yeah, it's a good idea to use flexbox in this situation.

要达到您想要的结果，据我了解，您需要在#container上设置height: 100%，使其占用所有可用空间.然后在.bottom上设置flex-grow: 0，以使其不会增长.

To achieve your desired result, as I understand, you need to set height: 100% on #container so that it occupies all the space available to it. Then set flex-grow: 0 on .bottom so that it doesn't grow.

因此您的CSS应该是:

So your CSS should be:

#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;
}

这篇关于Flexbox-填充剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！