Html CSS-如何使容器适合祖父母的所有可用高度？

我正在开发一个web应用程序，遇到布局问题

以下是预期设计，包括3个主要部分：

• 文章标题
• 文章内容
• 文章页脚

使用CSS Flexbox实现这种设计非常容易

html、正文、文章{
身高：100%；
保证金：0；
颜色：白色；
}
.文章{
显示器：flex；
弯曲方向：立柱；
}
.文章标题{
背景颜色：橙色；
}
.文章页脚{
背景颜色：绿色；
}
.文章内容{
柔性生长：1；
背景颜色：矢车菊蓝；
}

标题
文章内容
页脚

只有flex容器的直接子级才成为flex项，因此可以应用属性

flex grow:1

为此，您需要将

文章包装器

及其

div

子体下放到

文章内容

flex属性中，这三个属性都需要是flex容器和flex项

.article-wrapper,
.article-wrapper > div,
.article-wrapper > div > div {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

简单地说，

.article wrapper

是第一个

div

的柔性容器，第一个

div

将是

的柔性项。article wrapper

也将是第二个

div

的柔性容器，依此类推

更新

另外，根据您发布的图像，

文章内容

应该在内容超过其高度时滚动，为此，我在

包装内容

规则中添加了

溢出：自动

示例代码段

html、正文、文章{
身高：100%；
保证金：0；
}
.文章{
显示器：flex；
弯曲方向：立柱；
}
.文章标题{
背景颜色：橙色；
}
.文章页脚{
背景颜色：绿色；
}
.商品包装{
溢出：自动；
}
.物品包装，
.article wrapper>div，
.article wrapper>div>div{
柔性生长：1；
显示器：flex；
弯曲方向：立柱；
}
.文章内容{
柔性生长：1；
背景颜色：矢车菊蓝；
}

标题
文章内容。
我能适应所有的身高吗？



滚动溢出的内容


滚动溢出的内容


滚动溢出的内容


滚动溢出的内容


滚动溢出的内容


滚动溢出的内容


滚动溢出的内容


滚动溢出的内容


滚动溢出的内容


滚动溢出的内容


滚动溢出的内容


滚动溢出的内容


滚动溢出的内容


滚动溢出的内容


滚动溢出的内容


页脚

如果内容足够长，它将填充可用高度。你需要设置背景色还是什么？如果是这样，您可以将其设置为

，这样它就可以显示出来。这是一个很好的观点！不幸的是，长内容会将页脚从屏幕中挤出，而页脚应该始终停留在页面底部。@sorayadragon，我现在明白你的意思了！这真的很有帮助，可以以一种非常优雅的方式解决问题…非常感谢您提供的详细答案！使用Flexbox和Grid规格，解决方案仍然非常棘手，这真是令人伤心。