Question

看起来很简单，但是我把它包裹起来并且谷歌搜索了很多但是找不到答案：

具有两个垂直行的容器，一个具有以像素（标题）定义的高度，另一个具有应该延伸与剩余高度（滑块div）一样多的图像。问题是这个标题的高度是动态的（如未知），我们不能在定义容器或滑块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%;
    }

只是为了示例，标题设置为40px。它可以是任何其他值，但其他元素的CSS定义不应该意识到这一点，因为它是使用内联CSS动态加载的第三方组件。此外，滑块div是一个复杂的滑块（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>

Answer 2

下面的Flex示例：

＆＃13;

* {
    margin: 0;
}
section {
    height: 100vh;
    width: 400px;
    background: green;
    display: flex;
    flex-direction: column;
}
#slider {
    flex-grow: 2;
}
img {
    display: block;
    width: 100%;
    height: 100%;
}

＆＃13;

<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>

＆＃13;

同样在JSFiddle。

CSS垂直拉伸div以填充剩余容器

2 个答案: