Flexbox-填充剩余空间

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (457)

我有这样一个基本的挠曲盒布局。

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是动态的,因此高度取决于文本的变化。我的结果是这样的.。

在这种情况下,柔性箱是最好的选择吗?

提问于
用户回答回答于

容器未设置为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>

用户回答回答于

首先,需要使容器占据垂直空间。height: 100%;就能做到。

第二,如果想要标题div要与下面的div大小相同,它们不应该都是flex: 1;,实际上你可能希望这个头衔是flex: 0;

所属标签

可能回答问题的人

  • 西风

    renzha.net · 站长 (已认证)

    7 粉丝1 提问9 回答
  • 四无君

    0 粉丝0 提问3 回答
  • o o

    3 粉丝491 提问2 回答
  • Dingda

    Dingda · 站长 (已认证)

    4 粉丝0 提问2 回答

扫码关注云+社区

领取腾讯云代金券