Html Flexbox和flex:1名子女和孙子孙女100%

想象一下这种情况：使用flexbox制作一个简单的3行布局，中心行填充所有可用空间。相当标准的东西

标题
asdasd
asdasd
asdasd
页脚

以下是CSS：

html，
身体，
.集装箱{
身高：100%；
}
.柔性容器{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.flex容器.content{
弹性：1；
}
.flex容器.content.item{
身高：100%；
}

（省略背景色的css，你可以猜出来）

问题是“content”div不会向下推footer div，使其保持在页面底部，就像position:fixed with bottom:0一样。 滚动页面显示，除了这个问题，正确的行为，3个不同颜色的div都100%调整了浏览器窗口的大小

我错过了什么

编辑：看看这个jsfiddle

---

如果将100%更改为100vh，则此操作有效

.flex-container .content .item {
    height: 100vh;
}

---

还是我误解了这个问题？

这里有几个错误：

• 您将容器中的每个项目都设置为100%——这相当于300%：）
• 他们的父母“只有”100%
• 除非给定高度，否则页脚将隐藏
• 您以不健康的方式使用vh和%组合

您应该有2个flex组件：

• .flex容器

  -与屏幕大小匹配

• .flex container.content

  -能够拉伸项目

您应该将

.item

设置为

flex:1

以下是一个工作版本：

下面是一个使用scroll的工作示例：
我不确定您在寻找什么。也许对你有帮助


html，
身体{
保证金：0；
填充：0；
框大小：边框框；
高度：100vh；
最小高度：100vh；
}
.集装箱{
高度：100vh；
最小高度：100vh；
背景色：紫红色；
}
.页眉，.页脚{
高度：30px；
}
.flex容器.content{
显示器：flex；
身高：100%；
高度：计算（100vh-60px）；
}
.flex容器.content.item{
宽度：100%；
身高：100%；
}
瑞德先生{
背景色：红色；
}
黄先生{
背景颜色：黄色；
}
格林先生{
背景颜色：绿色；
}

标题
asdasd
asdasd
asdasd
页脚
height:100%
在
body
上，除非您也为
html
指定了一个高度，否则将不起任何作用。前两个
height:100%
body{height:100vh}
修复了@Turnip建议的代码，问题仍然存在。我试过RealTime你说的是固定位置的页脚，但你没有发布任何CSS？现在还不清楚您想要实现什么…我要说的是页脚的行为就像是“位置：固定；底部：0”。我想做的是把它推到底，在“内容”部分结束后滚动Hanks@Itamar你能告诉我为什么这不是正确的CSS吗？这不是争论，而是为了帮助我更好地理解。您将所有项目设置为100%的视图高度，而不是像askedbasicaly那样拉伸现有屏幕上的项目，您找到了完美的band aide解决方案，而不是修复损坏的自行车：）谢谢Itamar，这非常有意义：）我最终使用javascript计算高度，以实现我想要的视觉效果。但多亏了你@Itamar，你为我的另一个项目提供了有趣的想法。如果你能将你的解决方案添加到帖子中，以便将来搜索，我会很高兴的