2

私はかなり長い間このサイトに取り組んできましたが、まだいくつかの問題があります。レイアウトは次のとおりです。

  • 上部のナビゲーション バー: 高さ 68 ピクセル、全幅、上部に固定。
  • 下部のナビゲーション バー: 高さ 42 ピクセル、全幅、下部に固定。
  • コンテンツ: さまざまな幅のフルハイトの画像が左に浮いています。

コンテンツの移動は、水平スクロールのみで行われます。画像が上部のナビゲーション バーの下部から下部のナビゲーション バーの上部までの高さ全体を満たし、切り抜かれたり隠れたりしないようにすることが非常に重要です。また、ブラウザー ウィンドウのサイズを変更したり、モバイル デバイスを回転させたりしても、このレイアウトが崩れないようにすることも非常に重要です。私の現在のコードは、Chrome と Safari では完全に動作しますが (注意点が 1 つあります)、Firefox と Opera ではひどく失敗します。私はまだIEでテストしていません。これが私がやっていることです：

#header {
  width: 100%;
  height: 68px;
}

#content {
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 42px;
  z-index: -10;
  width: auto;
  height: auto;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

#content #frame {
  max-width: 80000px; /* (To ensure that there's enough horizontal space for images) */
}

#content #frame img {
  height: 100%;
  width: auto;
  float: left;
  margin-right: 5px;
  position: relative;
  z-index: 100;
}

#footer {
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: 0;
}

つまり、私が本質的に行っているのは、ウィンドウ内にウィンドウを作成し、そのウィンドウ内でスクロールすることです。これが、上記で言及した Safariの問題につながります。それとは別に、これは Chrome と Safari で私が望むとおりに機能します。Firefox と Opera では、画像はウィンドウの高さに合わせて拡大縮小されません。

自分でサイトを確認するには、http: //peter-block.com/preface/にアクセスしてください。パスワードは「letitrain」です。

私が考えているのは、「ウィンドウ内のウィンドウ」をすべて一緒に廃止することです（シンプルでSafariの問題を修正します）が、すべてのブラウザで希望どおりに機能するソリューションを見つけることができないようです. どんな助けでも大歓迎です。

4

3 に答える 3

1

クールなデザイン！top#contentとbottomを 0 に設定するとどうなりますか。次にposition: absolute#frame とtop: 68px;andbottom: 42px;処理を行います。それは正しい効果ですか？

于 2013-04-24T19:06:50.103 に答える
1

新しい入力に基づいて更新された作業フィドル: http://jsfiddle.net/XkrQg/5/

height: 100%;に追加#content #frame

#content #frame {
    height: 100%;
}

JS 部分:
これを loadImages() の先頭に追加します。

var frameWidth = 0;

そして、これを loadImage() に追加します

    img.onload = function () {
        frameWidth += img.width + 5; //5 is for margin-right:5px; on img in css
        $('#frame').css('width', frameWidth);
    }

#frameこのソリューションは、画像が読み込まれるときに動的に幅を計算します。

これを追加して、ウィンドウのサイズが変更されたときに新しい幅を再計算します。

$(window).resize(function () {
    var frameNewWidth = 0;
    $('#frame img').each(function () {
        frameNewWidth += $(this).width() + 5;
    });
    $('#frame').css('width', frameNewWidth);
})
    .resize();

必要に応じて、画像の読み込み中に垂直スクロール バーを非表示にすることができoverflow-x:hidden;ます。

于 2013-04-24T19:07:19.087 に答える
1 
#content #frame img {

    max-height: 100%;  // for IE

}
  • Arbel に同意します。#content #frame の高さを伸ばす必要があります。#content #frame にいくつかの clearfix を追加したいと思います
于 2013-04-24T19:45:27.633 に答える