0

私が現在取り組んでいるサイトには興味深いレイアウトがあり、CSS で正しく表示するのに苦労しています。ヘッダーとフッターはブラウザ ウィンドウの幅全体に広がり、コンテンツは幅 960 ピクセルのブロックに限定されますが、この 960 ピクセルのコンテンツ ブロック内には 2 つ目の「内部」フッターがあります。プライマリ フッターとこの「内部」フッターの両方をページの下部に配置する必要があります。以下は、機能単位に分解された Web サイトのマークアップです。

<html>
    <body>
        <header></header>
        <section id="content">
            MAIN CONTENT
            <section id="internal-footer"></section>
        </section>
        <footer></footer>
    </body>
</html>

CSS は次のとおりです。

html{margin:0;padding:0;min-height:100%;height:100%;}
body{margin:0;padding:0;min-height:100%;position:relative;}
header{width:100%;}
footer{width:100%;height:XXXpx;position:absolute;bottom:0;left:0;}
#content{width:960px;margin:0 auto;position:relative;padding-bottom:(XXX+YYY)px;}
#internal-footer{width:100%;height:YYYpx;position:absolute;bottom:0;left:0;padding-bottom:XXXpx;}

私が抱えている問題を示すために、ここで JSFiddle を作成しました (背景色と境界線を追加し、コンテンツの幅を狭めます)。

十分なコンテンツがある場合、すべてが意図したとおりに機能します。十分なコンテンツがない場合、#contentセクションが伸びず、内部フッターが持ち上げられるだけでなく、下部パディングのために高すぎます。もちろん、背が高すぎることは深刻な問題ではありません。なぜなら、私no-repeatは背景画像を設定することができ、誰も賢くないからです。

#contentでは、十分なコンテンツがない場合、スクロールバーを作成せずに、ページの下部まで強制的に伸ばすにはどうすればよいでしょうか?

4

3 に答える 3

1

以下のように HTML と CSS を変更すると、目的を達成するのに役立ちますか? これで、内部フッターがフッター内になり、中央にも配置されました。

<footer>
        <section id="internal-footer"></section>
</footer>



#internal-footer{width:300px;padding-bottom:50px!important;background-color:#990;height:50px;margin:-50px auto 0 auto;}

人々が簡単に解決策を見つけられるように、作業中のフィドラーであなたのコメントをコピーしています

フッターのコンテンツが移動するという 2 番目の問題を解決しました。最初に、内側のフッターの負の下部マージン (margin:-137px auto 0 auto) を削除する必要があり、次にフッターのパディングに等しいコピーライト p にマージンを追加する必要がありました。回答を更新して修正を組み込みます。受け入れることができます。これが最終的な機能するフィドルです：jsfiddle.net/M72fn

于 2013-11-11T14:22:14.727 に答える
0

恐れ入りますが、javascript を使用してください。これをjqueryで行う方法は次のとおりです。

$(document).ready(function(){
    if(($(window).height()-100)>$('#content').height()){
        $('#content').height($(window).height()-200);
    }
});

そしてここのフィドル

于 2013-11-11T14:27:20.853 に答える