Html Flexbox-填充剩余空间

我有一个基本的flexbox布局，如下所示

body，html{
身高：100%；
宽度：100%；
}
#容器{
宽度：100%；
背景：灰色；
显示器：flex；
弯曲方向：立柱；
}
.顶{
背景：红色；
弹性：1；
填充：20px；
}
.底部{
背景：黄色；
弹性：1；
填充：20px；
}

顶级内容
Lorem ipsum dolor sit amet，是一位杰出的献身者。但威尼斯人、佩伦茨克的自由之路、乌尔纳的自由之路、欧盟的罗勒姆·多洛·塞德·内克之路。不吃苦头，不吃苦头，不吃苦头。叶舌扫描电镜，叶舌扫描电镜，效率扫描电镜。

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

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

据我所知，为了达到您想要的效果，您需要在

#container

上设置

高度：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;
}

---

首先，您需要使容器占据垂直空间<代码>高度：100%将完成此操作

---

其次，如果希望title div的大小与下面的div不同，那么它们不应该都是

flex:1

，实际上您可能希望标题为

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


body，html{
身高：100%；
宽度：100%；
保证金：0；
}
#容器{
宽度：100%；
身高：100%；
背景：灰色；
显示器：flex；
弯曲方向：立柱；
}
.顶{
背景：红色；
flex:1自动；
填充：20px；
}
.底部{
背景：黄色；
flex:01自动；
填充：20px；
}

顶级内容
Lorem ipsum dolor sit amet，是一位杰出的献身者。但威尼斯人、佩伦茨克的自由之路、乌尔纳的自由之路、欧盟的罗勒姆·多洛·塞德·内克之路。不吃苦头，不吃苦头，不吃苦头。叶舌扫描电镜，叶舌扫描电镜，效率扫描电镜。
看起来高度是用铬和边填充的。您使用的是什么浏览器？您觉得它是什么样子的？你能添加一个屏幕截图吗？添加了一个屏幕截图，我看到的看起来像是：（flex:1仅在容器上填充空间，在父容器上有一个有效的高度，这样它就知道填充什么）