根据可见区域设置 div 的高度

Question

下面HTML我手动设置了中间div的高度为200px。如何自动调整此高度，使 div 的高度等于浏览器可见区域的高度？这可以用纯 CSS 来完成还是我需要 JavaScript?

<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div class="parallax"></div>

<div class="red">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

和CSS：

.parallax {
    /* The image used */
    background-image: url("http://az-themes.bluxart.netdna-cdn.com/ibuki/wp-content/uploads/2014/06/blog-img.jpg");

    /* Set a specific height */
    height: 200px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.red {
  height:1000px;
  background-color:red;
  color:white;
  font-size: 40px;
}

可以找到 Wokring 示例 here。

Answer 1

为此使用 vh 单位 - 因此 200px 变为 100vh 以填充屏幕的完整高度。

但请确保包含一个 min-height，以便在您的内容超出视口显示范围时使用。

关于这个的兼容性：

http://caniuse.com/#feat=viewport-units

Firefox：自 Firefox 19 (2013) 起受支持

Chrome：自 Chrome 20 (2012) 以来获得部分支持，自 Chrome 26 (2013)

以来获得全部支持

Safari：从 Safari 6 (2012) 开始部分支持，从 Safari 6.1 (2013) 开始全面支持

IE：自 IE 9 (2011) 以来的部分支持

Edge：自 Edge 12 (2015) 以来的部分支持

当我说部分支持时，在所有这些情况下，它们都不支持 vmax，反正您也不会为此使用它。

.parallax {
  /* The image used */
  background-image: url("http://az-themes.bluxart.netdna-cdn.com/ibuki/wp-content/uploads/2014/06/blog-img.jpg");
  /* Set a specific height */
  height: 100vh;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.red {
  height: 1000px;
  background-color: red;
  color: white;
  font-size: 40px;
}

<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div class="parallax"></div>

<div class="red">
  Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

您也可以使用 jQuery 执行此操作，使用 .height() 获得 window 高度。

$(document).ready(function() {

  wh = $(window).height();

  $(".parallax").css({
    "height": wh
  });

});

.parallax {
  /* The image used */
  background-image: url("http://az-themes.bluxart.netdna-cdn.com/ibuki/wp-content/uploads/2014/06/blog-img.jpg");
  /* Set a specific height */
  height: 100vh;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.red {
  height: 1000px;
  background-color: red;
  color: white;
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div class="parallax"></div>

<div class="red">
  Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

根据可见区域设置 div 的高度

Setting height of div to based on the visible area

javascript

html

css

parallax