jquery - 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。

这是带有我的代码的代码笔-但是，该代码似乎可以在此代码笔上使用！？

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

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

谢谢

Answer 1

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

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

Answer 2

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

我已经测试了你的代码它工作正常。

请通过添加就绪事件来尝试：

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

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

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

Answer 3

尝试这个Demo

演示

使用窗口大小调整功能

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

});