【问题标题】：How to get height of a browser window and then set a height of a div to that value如何获取浏览器窗口的高度，然后将 div 的高度设置为该值
【发布时间】：2015-08-11 15:19:54
【问题描述】：

当我打开一个页面时，我想获得全高背景图像。 Like this

我还没有开始使用jQuery，所以如果你能帮助我了解基本的js。到目前为止，这是我尝试过的方法，但没有奏效。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <script type="text/javascript" src="assets/js/basic.js"></script>
    <meta charset="UTF-8"> 
  </head>
  <body>
    <header>
      <div id="front-page" class="window_height_picture" onload="get_window_height()">
      </div>
    </header>
  </body>   
</html>

这是我的 .js 文件：

function get_window_height() {
    var window_height = window.innerHeight;
    document.getElementById('front-page').style.height = window_height + 'px';
}

我确实搜索过这个，但找不到我要找的东西。你能告诉我哪里错了，或者给我一个更好的代码吗？

【问题讨论】：

标签： javascript html css dom-events

【解决方案1】：

纯 CSS 解决方案

根本不需要 JavaScript。在 CSS 中使用 vh 视口长度单位。

视口百分比长度与初始包含块的大小相关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

——CSS Values and Units Module Level 3

这个单位专门将长度设置为等于 viewport h8 的百分比（其中1vh 是视口高度的 1%，等等。 ) 这里你想要100vh（视口高度的100%）：

#front-page {
    height: 100vh;
}

我在 Stack Overflow 上针对另一个问题发布的一个热门回答详细介绍了 vh 单位是什么：Make div 100% height of browser window。

【讨论】：

是的，就是这样。没想到这么简单--谢谢

【解决方案2】：

您可能已经注意到，在您提供的示例中，wordpress.com 主题使用background-size: cover; 作为背景图片。

见MDN's doc 或this friendly tutorial。

【讨论】：

是的，我使用了那个 css 属性，但如果我想通了，我认为它只适用于给定的高度和宽度，它不能将它设置为窗口高度，对吗？
不，确实没有将高度设置为视口的高度。只是想确保您不会错过这个非常方便的属性:-)