html - 用图像填充剩余的 div 高度

Question

我一直在谷歌搜索，但找不到我正在寻找的答案，看似简单的事情似乎非常复杂。

我想要做的就是有 2 个 div，其中一个应该占据渲染真正需要的高度。

第二个 div 应该用图像填充剩余空间(图像应该具有高度:100%)，例如尝试填充剩余高度。

这就是我目前所在的位置:http://jsfiddle.net/4rcmnu0z/

我见过很多如何使用 flexbox 和 table-row 来做到这一点的例子，但是它们不适用于图像本身。

<section>
  <header>
    header: sized to content
      <br/>this height grows as we have more content here.
  </header>
  <div>
    main content: (this fills remaining height) this cat picture should have height 100%<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break -->
    x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
</section>

CSS:

html, body { height: 100%; }
section {
  display: flex;
  flex-flow: column;
  height: 100%;
}
header {
  background: tomato;
}
div {
  flex: 2 ;
  background: gold;
  overflow: auto;

  background-position: center center; 
  background-size:auto 100%; 
  background: url('http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg') no-repeat;
}
footer {
  background: lightgreen;
  min-height: 60px; 
}

Answer 1

请按顺序定义背景设置。这就是问题所在，你的 CSS 本身工作正常，我做了一个小更改，我将 body 和 html 标记的边距设置为 0，这删除了滚动条，你可以使用此更改或保留它。

查看我的下面的演示。

JSFiddle Demo

CSS:

html, body { height: 100%;margin:0px; }
section {
  display: flex;
  flex-flow: column;
  height: 100%;
}
header {
  background: tomato;
}
div {
  flex: 2 ;
  background: gold;
  overflow: auto;
  background: url('http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg') no-repeat;
  background-size: auto 100%;
  background-position: center center;
}
footer {
  background: lightgreen;
  min-height: 60px; 
}