纯CSS解决方案

Question

所以，当我打开一个页面时，我希望获得全高背景图像。 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';
}

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

Answer 1

纯CSS解决方案

根本不需要JavaScript。使用CSS中的-I/path/to/file.h视口长度单位。

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

- CSS Values and Units Module Level 3

此单位专门将长度设置为等于 v iewport h 8的百分比（其中vh是视口高度的1％，等）你想要1vh（视口高度的100％）：

100vh

我在“Stack Overflow”中发布的另一个问题的热门答案详细介绍了#front-page { height: 100vh; }单位的内容：Make div 100% height of browser window。

Answer 2

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

请参阅MDN's doc或this friendly tutorial。

如何获取浏览器窗口的高度，然后将div的高度设置为该值

2 个答案:

纯CSS解决方案