Question

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

我想做的就是拥有2个div，其中一个应该占用渲染所需的高度。

第二个div应该用图像填充剩余的空间（图像应该有高度：100％），例如尝试填充剩余的高度。

我已经看过很多关于如何使用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

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

用你的Css改变它希望它有效：）

Answer 2

您需要在后台网址后应用background-position和background-size。并将图像拉伸到div background-size: 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;
}

我希望这会起作用

Answer 3

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

检查下面的DEMO。

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

用图像填充剩余的div高度

3 个答案: