Flexbox - 填充剩余空间[重复]

Posted 2023-03-06

【中文标题】Flexbox - 填充剩余空间[重复]

【英文标题】：Flexbox - Fill remaining space [duplicate]

【发布时间】：2018-11-11 22:28:02

【问题描述】：

我有一个像这样的基本 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 是不是最好的选择？

【问题讨论】：

看起来高度是用chrome和edge填充的。您使用的是什么浏览器，您觉得它是什么样的？可以加个截图吗？

添加了我看到的截图

似乎是：***.com/questions/25098042/… 的副本（flex:1 仅在容器上填充空间和父级上的有效高度，因此它知道要填充什么）

【参考方案1】：

在这种情况下使用 flexbox 是不是最好的选择？

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

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

所以你的 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;

【参考方案2】：

首先，你需要让容器占据垂直空间。 height: 100%; 会这样做。

其次，如果你想让title div 不和下面的div一样大，它们不应该都是flex: 1;，实际上你可能希望title是@987654323 @

【参考方案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>