Html 使用动态同级使父级的div填充高度

我有一个html结构，有一个容器和两个子容器。第一个子级是动态大小的映像，第二个子级也是动态大小的div

我想要两件事：

• 如果两个子元素小于主元素的总高度，则第二个子元素应填充空白
• 如果两个子元素的高度高于主元素的总高度，则主元素应展开以适合两个div，并且页脚应向下推

---

使用带有弯曲方向柱的flexbox，并在主屏幕上设置一组min-高度，然后让第二个孩子成长，而不是第一个孩子

*{框大小：边框框}
主要{
最小高度：500px；
显示器：flex；
弯曲方向：柱
}
.1分部{
弹性：0；
高度：100px；/*仅用于演示，未声明（自动）*/
边框：2倍纯色橙色；
颜色：橙色
}
.第2分部{
弹性：10自动；
边框：2件纯色浅蓝色；
颜色：浅蓝色；
}

具有dinamic高度的图像
包含页面信息的div

至少在2020年之前，我不会使用flexbox。它最近得到了主要网络浏览器的支持，总市场份额为aprox。35%（那些拥有支持flexbox版本的人）@JorgeeFG IE10，前缀为

-ms-

的人不应该抱怨建议的内容。IE9退出了游戏？我们（和他们）的市场份额还没有达到13%（2018年仍然很高）。微软在两年前停止了对8、9、10的支持！（现在与11和Edge进行斗争）。为这些浏览器提供编程“支持”就像公开同意用户受到恶意软件的侵害——而不是提供替代浏览器——在某些国家可能会受到惩罚：）@JorgeeFG真的吗？对flexbox的支持非常完美。这个东西会毫无问题地后退，“main”将只是显示：具有设置的最小高度的块，div1和div2将只是具有自动高度的块级元素。没那么可怕。@facundocoradini是的，忘了提一下：）@facundocoradini顺便说一句，最小高度-不。视口在这里很重要。使用

html，body

和

边距：0；身高：100%您必须使用javascript来完成此操作。