Html 用图像填充剩余的div高度

我一直在做一些谷歌搜索，我找不到我正在寻找的答案，看似简单的事情似乎很复杂

我想做的就是有两个div，一个div应该占据渲染所需的高度

第二个div应使用图像填充剩余空间（图像的高度应为100%），例如尝试填充剩余高度

这就是我目前的处境：

我已经看到了很多例子如何使用flexbox和table row来实现这一点，但是它们不能使用image本身

<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更改此选项，希望它能起作用：）

您需要在背景url之后应用

背景位置

和

背景大小

。并将图像拉伸到div make

背景尺寸：cover

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

---

我希望这能起作用

请按顺序定义背景设置。这就是问题所在，您的CSS本身工作正常，我做了一个小更改，我将

body

和

html

标记的边距设置为0，这删除了滚动条，您可以使用此更改或保留它

检查我下面的演示

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

---

该死的，我在这上面花了太多时间了，干杯！我需要按顺序定义它们有什么简单的原因吗？@Erti CHRISELMAA

background

属性用于同时定义所有单独的背景属性，在您的情况下，最后一个命令覆盖了其他背景属性集！因为它用来表示所有的东西，所以顺序非常重要！

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

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