Question

正如你在this JSFiddle上看到的那样，我试图让DIV的背景图片占据视口头的100％（目标是实现something like this）

不幸的是，我尝试了各种各样的事情没有成功（即将element-1的高度更改为100％，描述的方法为here等）。有什么问题？

非常感谢

HTML

<header>
    <div class="element element-1"></div>
    <div class="article-titles">
      <h1 class="title">Head Text</h1>
      <h2 class="subtitle">Sub-head text</h2>
    </div>
  </header>

CSS：

.element {
  float: left;
  width: 100%;
  background-size: 100% auto;
  background-attachment: fixed;
}

.element-1 {
  position: relative;
  z-index: 8;
  height: 600px; <-- I've tried to change this to 100% but without success
  border-top: 10px solid rgb(0, 0, 0);
  background-image: url('http://placehold.it/650x450');
  background-position: center center;
  background-color: rgb(222, 222, 222);
}

Answer 1

将.element-1的高度更改为100％只会将其提高到父元素高度的100％。

如果您希望背景图片覆盖整个视口，我会将其附加到<body>或<html>。

如果您将其附加到<html>，它将覆盖整个视口，您不必（实际上不应该）在其上设置height属性。

Answer 2

如果向后兼容性不是您要寻找的内容之一，那么就是can use viewport units。

给予.element-1高度100vh会使div占据视口（可见区域）高度的100％。

Updated Fiddle

DIV没有采取100％视口高度

2 个答案: