html - 让div用动态同级填充父级的高度

Question

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

我想要两件事:

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

Answer 1

在主框架上使用带有 flex-direction 列和设置 min-height 的 Flexbox，然后允许第二个子项增长，而不是第一个

*{box-sizing:border-box}

main{
  min-height:500px;
  display:flex;
  flex-direction:column
}

.div1{
  flex:0;
  height: 100px; /*for demonstration only, leave it undeclared (auto)*/
  border:2px solid orange; 
  color:orange
}

.div2{
  flex: 1 0 auto;
  border: 2px solid lightblue;
  color:lightblue;
}

<main>
  <div class="div1"><p>image with dinamic height</div>
  <div class="div2"><p>div with information about the page</div>
</main>