2

私が必要としているのは、コンテンツとフッターの 2 つの主要部分のみを含む非常に基本的なレイアウトです。フッターは常にビューポートの下部にある必要があります。ので、私は持っています：

  • コンテンツ (位置:相対)
  • フッター (位置: 固定; 下:0px) コンテンツが少ない場合に有効です (画像 1を参照)。

ビューポートが短すぎるか、コンテンツが多い場合に問題が発生します (画像 2を参照)。

コンテンツがフッターの後ろに入り（オーバーラップ）、ページスクロールが表示されます。

私も前に出したくありません。私が欲しいのはこれです（画像3を参照）

コンテンツはフッターと重ならず、ページ スクロールはコンテンツ div のみをスクロールします。

それを達成する方法、またはそれが可能かどうかさえわかりません。jquery の使用は気にしませんし、ie6 も気にしません。どんな助けでも大歓迎です

ありがとう

編集：

返信ありがとうございます。

必要なものをよりよく理解できるように、いくつかの画像をアップロードしています。

画像 1 http://estudioibarra.com/test/image1.jpgでは、私が望むデザインを見ることができます。画像 2 http://estudioibarra.com/test/image2.jpgは、同じ画像といくつかの説明です。

私が欲しいのは、私のメニューであるため、常にビューポートの下部にあるヘッダーです。また、コンテンツがメニューと重ならないようにします。コンテンツには 3 つ以上のプロジェクトがあるためです。

私が望まないのは、このhttp://estudioibarra.com/test/image3.jpg (メニューの後ろに表示されるコンテンツ) です。

あなたのソリューションのいくつかでそれを解決できますが、コンテナ div にスクロールがある場合のみです。私は本当にそれが好きではありません。

メインページのスクロールを使用してコンテナのコンテンツをスクロールすることはありますか??

お時間をいただきありがとうございました

4

3 に答える 3

4

position: fixed次のデモのように、コンテンツとフッターの両方を作成し、好きなように配置してみてはいかがでしょうか: http://jsfiddle.net/bAtVE/ ?

#content {
    position: fixed;
    height: 85%;
    width: 95%;
    border: 1px blue solid;
    overflow-y: auto;
}

#footer {
    position: fixed;
    height: 10%;
    width: 95%;
    bottom: 0;
    border: 1px red solid;
}

<div id="content">
    here is content
</div>
<div id="footer">
    This is footer
</div>

編集：

今回利用position: absoluteしました（http://jsfiddle.net/bAtVE/1/参照）。fixed位置はクロスブラウザー互換性がないため、おそらくより良い方法です。

#content {
    position: absolute;
    top: 0;
    left: 0;
    height: 85%;
    width: 100%;
    overflow-y: auto;
}

#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10%;
    width: 100%;
}

EDIT2：

http://jsfiddle.net/bAtVE/2/

于 2011-03-25T23:36:14.487 に答える
1

フッターを下に固定してborder-top、背景と同じ色にするのはどうですか？

body { background:#eeeeed; }
#wrap { width:34em; margin:0 auto; }
#head, #foot { padding:1em 2em; }
#head, #main { background:#fff; }
#main { padding:0 2em 6em; }
#foot {
    bottom:0;
    color:#fff;
    width:30em;
    position:fixed;
    background:#444;
    text-align:center;
    border-top:1em solid #eeeeed;
}

デモ：jsfiddle.net/Marcel/xgafM

于 2011-03-26T00:41:39.453 に答える
1

以下の例では、親要素にコンテンツのオーバーフローがあっても、フッターは固定されたままです。コンテナーのサイズは動的に変更でき、それに応じてフッターの幅が調整されます。とは異なり、フッターはコンテナーに依存し、ブラウザー ウィンドウには依存しませんposition:fixed。jQuery を使用すると、次のことができます。

var cw = $('#container').innerWidth();

$('#header').css({
    'width': cw + "px"
});

$('#container').scroll(function() {
    $('#header').css({
        'bottom': -$('#container').scrollTop()
    })
})

http://jsfiddle.net/M2n8Q/で実際の例を確認してください

于 2011-03-25T23:26:55.760 に答える