jquery - div 内的图像将内容 + 内容推送到与图像相同的高度(使用 CSS Flexbox)

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

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

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

我想做的事情如下:

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

高度可能不等于屏幕的高度。

如果小于屏幕的高度，那就没问题。但如果它更长，那么如果图像周围的 div 得到一个 overflow:hidden 那就太好了(直到知道它不起作用，可能是因为 flexbox)。

内容出现在图像之后(位置:固定)，以便用户可以向下滚动，并且内容会覆盖图像。

但有时内容的高度小于图像的高度，所以我需要将内容设置为min-heigh:窗口的高度 - 页脚的高度，这是我用 Javascript 完成的。

但是效果不佳，因为图像的高度被内容 div 推高了(图像要高得多)。事实上，内容的底部就像固定在底部一样，而 div 的顶部会阻止图像增长。

我可能不清楚(抱歉，英语不是我的主要语言)，所以请随时提问。

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

最佳答案

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

如果你想用 JS 来实现，你需要在代码中设置高度，如下所示:(CSS 仅用于演示)

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

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

关于jquery - div 内的图像将内容 + 内容推送到与图像相同的高度(使用 CSS Flexbox)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35350936/