-3

ヘッダー div とフッター div があります。ヘッダー div は移動しません。ただし、フッター div は、画面サイズに関係なくウィンドウの下部に配置する必要があります。つまり、「スティッキー フッター」です。これら 2 つの div の間には、動的に入力されるコンテンツ div があります。

  1. コンテンツ div の下部は、フッター div の真上にあり、フッター div と一緒に上下に移動する必要があります (画面サイズが垂直方向に伸縮する場合)。これも「スティッキー」と見なすことができます。

  2. ただし、十分なコンテンツがある場合は、可能な限り多くのコンテンツを収容するために、コンテンツ div を垂直方向に拡張する必要があります (コンテンツ div の下部はまだフッター div のすぐ上に残っています)。これは、コンテンツ div の上部がヘッダー div に到達するまで発生します...

  3. 次に、ヘッダー div とフッター div の間に表示するコンテンツが多すぎる場合、コンテンツ div はスクロール可能になり、コンテンツ div の高さが収縮して、ヘッダー div やフッター div と重ならないようになります。

  4. 繰り返しになりますが、コンテンツ div は、ヘッダー div またはフッター div とオーバーラップすることはできません。すべてのコンテンツを 1 つのビューに表示するには、2 つの div の間に十分なスペースがない場合、コンテンツ div を scrollable にする必要がありoverflow-y: scroll;ます。

これは、これまでの私の（実りのない）試みを説明して
います。これはまだ成功していません。私が持っているものは最小限であり、本質的に役に立たない. 私が抱えている問題のいくつかは次のとおりです。フッターをdivposition: absolute; bottom: 0px;にすると、「スティッキーフッター」になり、垂直画面サイズに関係なく画面の下部に残ります。ただし、この絶対配置では、コンテンツの div がフッターとうまく重なって表示されます。コンテンツを div にすることでこれを防ごうとしましたposition: absolute; bottom: 180px;。の180px私のフッターdivの高さです。これはうまくいきます...少し。コンテンツを動的に追加する必要がある場合、これは急速に問題になります。コンテンツ div の上部はヘッダー div とすぐに重なります...そのため、コンテンツ div に固定の高さを設定し、その高さを超えたときにスクロールを有効にしますが、それは自分の画面よりも大きいことを考慮していませんコンテンツを表示するためのより多くのスペースがある場合があります。

最終的に、これはどれも私が必要とする方法で機能しません。CSS や JavaScript (必要な場合) を使用してこれを達成する最善の方法は何ですか? そして、あなたが知っているかもしれない正しい軌道に乗せるための良い出発点はありますか?

ご協力ありがとうございました！

4

1 に答える 1

1

これはCSSでは可能ではないと思いますflexbox。幸運にもフレックスボックスをサポートするブラウザのみをサポートする必要がある場合（または古いブラウザの標準レイアウトにフォールバックできる場合）は、次のことを試すことができます。

HTML：

<header></header>

<div class="content">
    <div class="container"></div>
</div>

<footer></footer>

CSS：

header, footer {
    position: fixed;
    left: 0; right: 0;
    height: 100px;
}

header { top: 0 }
footer { bottom: 0 }

.content {
    position: fixed;
    top: 100px; bottom: 100px;
    left: 0; right: 0;
    overflow-y: scroll;

    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    display: flex;

    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    -o-align-items: flex-end;
    align-items: flex-end;
}

これがフィドルです：http：//jsfiddle.net/qhKa9/

JavaScriptに依存することに問題がない場合は、ブラウザをはるかにサポートする別のソリューションがある可能性があります。これがそのショットです。

CSS：

header, footer {
    position: fixed;
    left: 0; right: 0;
    height: 100px;
}

header { top: 0 }
footer { bottom: 0 }

.content {
    position: fixed;
    top: 100px; bottom: 100px;
    left: 0; right: 0;
    overflow-y: scroll;
}

.container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

JavaScript（jQueryを使用）：

var $content = $('.content'),
    $container = $('.container'),
    containerHeight = $container.outerHeight();

$(window).resize(function () {
    $container.css({
        position: $content.innerHeight() > containerHeight ? 'absolute' : 'static'
    });
}).resize();

これがフィドルです：http：//jsfiddle.net/N672c/

PSおそらく、そのサイズ変更イベントリスナーを調整する必要がありますが、それは別の日の議論です。

于 2013-01-20T05:58:18.443 に答える