jQuery div来填充视口并调整大小不起作用

Question

我正在使用这个jQuery来获取视口的大小并将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就会填充视口 - 但我希望div立即填充视口，然后让我向下滚动到下一个div。 / p>

这是我的代码的代码笔 - 但是，代码似乎适用于此代码笔！？

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

有人可以提供我出错的地方吗？因为我的代码在Safari chrome或firefox中不起作用，但它可以在Code Pen中使用。

由于

Answer 1

您需要在jQuery周围添加ready()方法，以便在浏览器解析 HTML后执行

。

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

Answer 2

调整大小在您的示例中正常工作。

我测试你的代码工作正常。

请通过添加ready事件来尝试：

$(document).ready(function(){
          //put your jquery code here
});

指定在DOM完全加载时要执行的函数。

传递给 .ready（）的处理程序保证在 DOM 准备就绪后执行，因此这通常是附加所有其他事件处理程序的最佳位置运行其他jQuery代码。使用依赖于CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

Answer 3

试试这个Demo

<强> DEMO

使用窗口调整大小功能

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

}）;