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

你不需要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 2

我会使用flexbox来回答Paulie_D的回答。

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

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

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

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

Answer 3

也许是这样的：

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

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

3 个答案: