CSS 垂直拉伸(stretch) div 以填充剩余的容器

Question

这看起来很简单，但我全神贯注地搜索了很多但找不到答案:

具有两个垂直行的容器，一个以像素为单位定义高度(标题)，另一个具有应拉伸(stretch)到剩余高度( slider div)的图像。问题是标题的高度是动态的(未知)，我们不能在定义容器或 slider div 的 CSS 时使用该值。

没有javascript怎么解决？

<section>
  <header style="height:40px; background: yellow;">header</header>
  <div id="slider">  
        <img src="http://amanita-design.net/img/home-news/botanicula.jpg" />
  </div>
</section>


    section {
      position: absolute;         
      top: 0; 
      left: 0;
      height: 100%;
      width: 400px;
      background: green;
    }
    #slider {
      height: 100%; /* this is wrong; how to set height to stretch element? */
    }
    img {
      width: 100%;
      height: 100%;
    }

Header 设置为 40px 只是为了示例。它可以是任何其他值，但其他元素的 CSS 定义不应该知道这一点，因为它是使用内联 CSS 动态加载的第 3 方组件。此外， slider div 是一个复杂的 slider (Swiper)，它使用一堆嵌套的 div 呈现代码，但我需要完全使用那个。

但是这个 DOM 结构应该是我的案例的粗略草图。

示例在这里:https://jsfiddle.net/snaokLxd/3/

Answer 1

将父级设置为 flex，将 #slider 设置为 flex-grow: 1(或 flex: 1 0 0简称)

section {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 400px;
  background: green;
  display: flex;
  flex-direction: column;
}

#slider {
  flex: 1 0 0;
}

img {
  width: 100%;
  height: 100%;
  vertical-align: top;
}

<section>
  <header style="height:40px; background: yellow;">header</header>
  <div id="slider">
    <img src="http://amanita-design.net/img/home-news/botanicula.jpg" />
  </div>
</section>