1

私は、シンプルなタイル張りの背景を持つ 5 つのセクションに分割された単一ページのスクロール サイトに取り組んでいます。背の高い画面のために、ビューポートの高さを計算してから、次のようにセクションに最小の高さを追加しています。

$('section').css({'min-height': viewportHeight + 'px'});

標準のパディング (上下) を 100px にしたい場合は、CSS でそれを設定し、上記の min-height 関数から 200 を引くことができますが、代わりに、それぞれの高さがsection は、ビューポートの高さから 200px を引いた値 (標準のパディング) よりも小さく、そうである場合 (つまり、その下に多くの余分なスペースがあることを意味します)、ビューポートの高さの半分からセクションの高さを引いた値のパディングを条件付きで適用します。これが私が説明しようとしているものですが、私の jQuery の無能さを許していただく必要があります。

$('.home-top,.home-menu,.home-gallery,.home-press,.home-info').each(function(){
    if(($(this).height) < (viewportHeight - 200)) {
        $(this).css({'padding': (viewportHeight - $(this).height())/2 + 'px ' + 0 'px'})
    } else {
        $(this).css({'padding': (100 + 'px ' + 0 'px'})
    }
});

たとえば、ビューポートの高さが 1000 ピクセルで、特定のセクションが 250 ピクセルしかない場合、パディングは (1000 - コンテンツの高さ)/2 または "パディング: 350 ピクセル 0" になります。この基準に一致しない背の高いセクションは、「パディング: 100px 0」になります。

これが理にかなっているかどうかはわかりませんが、基本的には、最小の高さを設定しながら、動的な高さのコンテンツをセクション内で垂直方向に中央に配置して、最も短いセクションの背景でも訪問者の画面の高さ全体に収まるようにしようとしています. ありがとう！

4

0 に答える 0