javascript - 为什么图像不占据页面的整个高度？

Question

我希望图像(任何图像)高度等于窗口高度，即使我调整大小，我想通过 jquery 来完成。我在 jquery 中使用了 resize 方法，但没有得到我需要的结果。

html:

<div class="header">
        <div class="container">

        </div>
</div>

CSS:

.container {
       width: 1200px;
       margin: auto;
}

.header {
background: url('https://preview.ibb.co/cu9YyH/download.jpg');
background-repeat: no-repeat;
}

jquery:

$(function () {
        $(".header").height($(window).height());

        $(window).resize(function () {

            $(".header").height($(window).height());
        });
});

Answer 1

这里不需要JS。仅 CSS 就可以完成这项工作，并且由于两个原因而更可取。首先，这是一个 UI 问题，所以你不应该使用 JS 作为它的拐杖。其次，它的性能更好，您不需要依赖 resize 事件来更新元素上的设置。

要实现您需要的效果，请使用 vh(视口(viewport)高度)单位，如下所示:

html, body {
  padding: 0;
  margin: 0;
}
header {
  background-color: #ccc;
  height: 100vh;
}
div {
  min-height: 50px;
}

<header>
  I am the full-height header...
</header>
<div>
  Some content here...
</div>