2

この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では機能します。

ありがとう

4

3 に答える 3

2

HTML がブラウザーによって解析された後ready()に実行されるように、jQuery の周りにメソッドを追加する必要があります。

  $(document).ready(function(){
      $("#hero").height($(window).height());
          $(window).resize(function(){
              $("#hero").height($(window).height());
      });
  });
于 2013-08-17T12:30:47.060 に答える
0

これを試してDemo

デモ

ウィンドウリサイズ機能を使う

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

});

于 2013-08-17T12:33:50.497 に答える
0

あなたの例ではサイズを変更してください。

私はあなたのコードが正常に動作することをテストしました。

ready イベントを追加して試してみてください:

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

DOM が完全にロードされたときに実行する関数を指定します。

.ready()に渡されたハンドラーは、 DOMの準備が整った後に実行されることが保証されているため、これは通常、他のすべてのイベント ハンドラーをアタッチして他の jQuery コードを実行するのに最適な場所です。CSS スタイル プロパティの値に依存するスクリプトを使用する場合は、スクリプトを参照する前に、外部のスタイルシートを参照するか、スタイル要素を埋め込むことが重要です。

于 2013-08-17T12:29:14.553 に答える