3

固定フッターを使用する代わりに、#mainContent div のサイズを変更する jQuery 関数を作成して、フッターがうまく収まるようにすることにしました。

基本的に私がやろうとしていることは

 #mainContent { height: 100% - 40px; }

どこ

#footer { height:40px; }

私が思いついた

$(window).resize(function() {
    var mainContent = $('#mainContent').innerHeight() - 40;
    $('#mainContent').css("height", mainContent);
});

ただし、サイズを変更するたびに、#mainContent を 40px 短くするだけで、#mainContent を 40px にする必要はありません。

$(window).resize(function() {
    var mainContent = $(document).height() - 80;
    $('#mainContent').css("height", mainContent);
});

何かが足りない気がします。

助けてください。

編集: ヘッダーとフッターは静的です (つまり、それぞれ 40px)。フッター フローを使用せずに mainContent のサイズを変更したいと思います (スティッキー フッターは margin-top:-40px; を使用するため)。フッターを画面の下部に配置したい。Edit2: 2 回目の試行を追加しました。

4

7 に答える 7

2

で div の高さと幅を指定するだけ%です。

それがあなたのために働くかどうかを確認してください。

于 2013-05-15T13:34:11.923 に答える
0

これがあなたが探しているものであるかどうかは 100% 確信が持てません#mainContent。下の 40 ピクセルを除いてウィンドウ全体を埋めたいようです。もしそうなら、これはあなたのために働くはずです：

HTML:

<div id="mainContent">This is the main content</div>
<div id="footer">This is the footer</div>

CSS:

#mainContent {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:40px;
    background:#F0F0F0;
    overflow:auto;
}
#footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:40px;
    background:#FCC;
}

作業例: http://jsfiddle.net/nvNRY/1/

編集:body #mainContent をフレームのように (つまり、独自のスクロールバーで) 動作させたくない場合は、タグ の下部に 40px のパディングを追加します。#mainContent絶対に配置しないでください#footer。パディングに突き当たりますが、パディングに重なってしまいます。

編集 2: ヘッダーと表示の例overflow:scrollはアクションです: http://jsfiddle.net/nvNRY/2/

于 2013-05-15T13:40:11.553 に答える
0

サイズのピクセル値をハードコーディングしたため、短縮され続けます。ハードコーディングされた値のため、サイズは拡大/縮小しません。

高さ全体を取得したい場合は、高さを読み取る前に設定した px 値を削除する必要があります。

于 2013-05-15T13:34:10.950 に答える
0

RaraituL が言ったように、スティッキー フッターを使用できます。次に、本当に 100% の高さを実行したい場合は、次のようにすることができます。

#mainContent { height: 100%; box-sizing:border-box; padding:0 0 40px;}

すべてのベンダー プレフィックスを追加すると、正しいサイズになります。についてはこちらをご覧くださいbox-sizing。

于 2013-05-15T13:41:13.747 に答える