jQuery div 填充视口(viewport)并调整大小不起作用

Question

我正在使用这个 jQuery 来获取视口(viewport)的大小并将 div 设置为此大小:

    $("#hero").height($(window).height());
       $(window).resize(function(){
          $("#hero").height($(window).height());
    });

这是我的 HTML:

    <section id="hero">
        Content here
    </section>

    <section class="showcase">
        Content here
    </section>

还有我的 CSS:

body {
 padding: 0;
 margin: 0;
 border: 0;
 background: #f5f6f7;
 color: #fff;
 text-align: center;
}

section {
 width: 100%;
 position: relative;
}

#hero {
 background: black; 
}

.showcase {
     background: blue;
     height: 500px;
}

我不知道为什么这不起作用 - 我对 javascript/jQuery 很陌生，所以我可能遗漏了一些相当明显的东西。

基本上发生的事情是——当页面加载 div 时看起来像这样:

(div 仅包装“此处的内容”内容 - 例如，没有设置高度)

只要我捕获浏览器窗口的底部并调整它的大小，div 就会填充视口(viewport) - 但我希望 div 立即填充视口(viewport)，然后允许我向下滚动到下一个 div。

这是一个带有我的代码的代码笔 - 但是，代码似乎可以在这个代码笔上工作!？

http://codepen.io/maxwbailey/pen/xDGmy

有人可以提供我哪里出错的解决方案吗？因为我的代码在 Safari chrome 或 firefox 中不起作用，但它在代码笔中有效。

谢谢

Answer 1

您需要添加一个 ready()围绕您的 jQuery 方法，以便它在浏览器解析您的 HTML 之后执行。

  $(document).ready(function(){
      $("#hero").height($(window).height());
          $(window).resize(function(){
              $("#hero").height($(window).height());
      });
  });