div内的图像将内容+内容推送到图像的相同高度（使用CSS Flexbox）

Question

我目前正在尝试为基于 wordpress 的网站制作（而不是开发...）模板。

我有一个文章页面，其中有一个position: fixed 页眉/菜单、一个position: fixed 图片、一些必须出现在图片之后的内容，以及一个动态页脚。

为了获得动态页脚，我在页面上使用了flexbox。

我打算做的如下：

图像没有固定大小。它适合宽度的屏幕。

heights 可能不等于屏幕的height。

如果小于屏幕的height，没关系。但是如果它更长，那么如果图像周围的 div 有一个 overflow: hidden 会很好（直到知道它不起作用，可能是因为 flexbox）。

内容出现在图片（position: fixed）之后，因此用户可以向下滚动，内容会覆盖图片。

但有时内容的height 比图像的height 小，所以我需要将内容设置为min-heigh: window's height - footer's height，这是我用Javascript 完成的。

但由于图像的高度被内容 div 推高（图像要高得多），因此效果不佳。实际上，内容的底部就像固定在底部一样，而 div 的顶部阻止了图像的增长。

我可能不清楚（抱歉，英语不是我的主要语言），请随时提问。

我在线更新了我的模板，以便您可以看到当前版本：http://extatic.net

Answer 1

我会使用 flexbox 选择 Paulie_D 的答案。

如果你想用 JS 来做，你需要在你的代码中设置高度，像这样：（CSS 仅用于演示）

$(function() {
  var h = $(window).innerHeight(),
    f = $('footer').innerHeight();

  $('main').height(h - f);
});

完整演示：https://jsfiddle.net/397d92g0/

Answer 2

您不需要 javascript。 Flexbox 可以原生地做到这一点。

html,
body {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
}
main {
  flex: 1;
  background: plum;
}
footer {
  height: 75px;
  background: #f00;
}

<main></main>
<footer></footer>

Answer 3

可能是这样的：

var height = $("#footerID").height();// for height
var width = $("#footerId").width();// for width
var width = $("footer").width();