javascript - スーパーサイズのフルスクリーン スライドショーから 100px を取得するには?

Question

特大サイズのスライドショーでは、スライドショーの画像が画面いっぱいに引き伸ばされます。それでも、スライドショーの前に（上ではなく）100pxのヘッダーが必要です。どのようにできるのか？

FAQ には、スライドショーをフルスクリーンにする必要はないと説明されていますが、上から 100px を期待してフルスクリーンにしたいのです。

Answer 1

ご質問から少し時間が経っていることは承知していますが、これを使用して、Supersized が占めるスペースを縮小しました。

function portfolioSize () {
    $('#supersized').height( $(window).height() - 71 );
}
$(window).load(function() { portfolioSize(); });
$(window).resize(function() { portfolioSize(); });

これにより、ウィンドウの高さが引き出され、必要な量のピクセルが差し引かれます。以下の 2 行は、初期ロード時とブラウザ ウィンドウのサイズ変更時に関数が適用されるようにするために使用されます。

編集: 補足として、次の CSS も必要になる可能性があると思います (これが必要なサイトで作業してから少し経ちましたが、これらは他の理由で存在する可能性があります)。

#supersized {position: relative !important;}

#supersized li {position: absolute !important; height: 100% !important;}

Answer 2

簡単 - これを CSS に追加するだけです。

#supersized li {top:100px !important}

次に、絶対配置を使用してヘッダーを画面の上部に追加します:)

Answer 3

コンテナを作成したり、divその中にスライドショーを設定したりできます。または、スライドショーの親セレクターにまたはを割り当ててみてください。（つまり、スライドショーの親コンテナを使用する場合は、これを指定できます）。display: blockmargin-top: 100pxmargin-top: 100pxtop: 100pxulli

padding-topまたはを試しborder-topて 100px を割り当てることもできます。あなたにはたくさんの選択肢があります。

流動的なレイアウトを使用することをお勧めします。こちらがライブデモです。