0

奇妙な問題があります。ブラウザの高さを変更すると、データが非表示になります。モバイルブラウザのサイズでも消えます...スクリーンショットは次のとおりです。

ここに画像の説明を入力

私はこのチュートリアルに従っています

問題のページはこちらです。

4

2 に答える 2

1

もちろん身長の問題です。1 つのことを行い、各スライドの最小の高さを約 800 または 900 ピクセルに設定します。そして、テストすると、きっとうまくいくでしょう。

.slide {
background-attachment: fixed;
height: 100%;
min-height: 800px;  /*set any height here*/
position: relative;
width: 100%;

}

于 2013-07-10T09:01:31.793 に答える
1

私が言えることから、あなたのスライド DIV にはタグとタグがありheight: 100%;ます。 ビューポート サイズから高さを継承します。垂直方向の高さを変更すると、コンテンツがビューポートよりも大きくなります。コンテンツは、その後に続く要素の下に隠されます。すべてのスライドから背景色を削除すると、コンテンツが重なって見え始めます。htmlbodyhtml

あなたがする必要があるのはheight: 100%;、スライドから削除することです。これにより、スライダー DIV が実際に占める高さに合わせて拡張され、要素のスタックが防止されるため、スライダー DIV にコンテンツが含まれたり表示されたりします。

必要なのは、スライドをビューポート サイズまたはコンテンツ サイズのどちらか大きい方にすることです。すでに jQuery を使用しているので、次のようなことを試すことができます。

http://jsfiddle.net/z6xrf/

function slideHeights() {

     var viewportHeight = $(window).height();

     $('.slide').each(function(){

          var elem = $(this);

          // reset so we can get the correct height of element each time
          elem.css('height','auto');

          var slideHeight = elem.height();  // height of content in slide

          if ( viewportHeight > slideHeight ) {
               height = viewportHeight;
          } else {
               height = slideHeight;
          }

          elem.css('height', height);

     });

}
$(document).ready(function(){
     slideHeights();  // for page load
     $(window).resize(slideHeights);  // for window resize
});

上記で行ったことは、ビューポートの現在のサイズを監視し、それをスライドの高さ (スライドのコンテンツの合計の高さ) と比較する関数を作成することです。ビューポートの高さがコンテンツの高さよりも大きい場合はそれを使用し、それ以外の場合はスライドのコンテンツの高さを使用します。その過程で、min-height以前に設定した値を読み取らないように値をリセットします。

最初は、単に呼び出すだけで、ページの読み込み時に関数を起動します。次に、それを resize 関数に渡し、適切なときに呼び出されるようにします。ブラウザがサイズ変更イベントを適用する方法については、 http://api.jquery.com/resize/を参照してください。

于 2013-07-09T23:02:33.007 に答える