Question

即使我调整大小，我希望图像高度等于窗口高度但代码不起作用

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（视口高度）单位，如下所示：

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>

为什么图像没有占据页面的整个高度？

1 个答案: