1

数時間のデザインバトルの後、私はあなたのところに手を差し伸べます。ご覧のとおり、ナイトクラブのウェブサイトを構築しています。 wbesiteプレビュー

中央の領域（黄色で囲まれている）を、フッターが開始するページの下部まで伸ばすことができません（フッターは緑色の上部境界のdivです）。これは、コンテンツが残りの高さを埋めるのに十分ではないために発生します。

これは私のCSSです

html, body{
    height: 100%;
    margin: 0 auto;
}

#container{
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; /* as #footer height */
    min-height: 100%;
    text-align: center; 
    border: 5px solid blue;
}

#centered-container{
    width: 950px;
    margin: 0 auto;
    text-align: left;
    border: 5px solid yellow; 

}

#body-container{  
    border: 5px solid red; 
}

#footer, .footer{
    height: 50px;
}

#footer{
    text-align: center;
    border-top: 5px solid green;
}

そしてこれは私のhtmlマークアップです

<body>
    <div id="container"> <!-- BLUE BORDER -->
        <div id="centered-container"> <!-- YELLOW BORDER -->
            <div id="body-container"> <!-- RED BORDER -->
            </div>
        </div>
        <div class="footer"></div> <!-- GREEN BORDER -->
    </div>
    <div id="footer"></div>
</body>

期待される動作：

ここに画像の説明を入力してください

追加の事実-色付きの境界線は、ネズミイルカをデバッグするためだけのものです

4

2 に答える 2

5

height: auto !important;で取り出し#containerます。を追加height: 100%;します。余白を少し変更して、フィット感を高めることができます。#centered-container#body-container

最も重要なことは、下からhtml下へのタグのパスに#body-containerはすべてが必要であるということheight: 100%です。

http://jsfiddle.net/NQHjc/を参照してください

編集

コメントに基づいて、私は追加しました

position:relative;
top:50px;

に#footer。http://jsfiddle.net/NQHjc/3/を参照してください。テキストがdivをオーバーフローすると、スクロールバーが表示されることに注意してください（この方法を使用すると、かなり必要になります）。

于 2012-11-10T03:49:34.023 に答える
0

黄色の境界線を使用してもかまわない場合は、これを行うことができます

新しい要素にCSSを追加します。

#whiteBox{
    width:100%;
    height:1250px;
}

そして、赤い境界線の間に新しい要素を追加します

    <div id="body-container"> <!-- RED BORDER -->
            <div id="whiteBox"></div>
    </div>

私はあなたの写真の高さを持っていないので、私は1250pxの高さを置いていることに注意してください。しかし、私はあなたの写真/要素の正確な高さを知らないので、高さで遊んでください。

JSにそのようなものを追加します

    window.onload = function(){
        var whiteBox = document.getElementById("whiteBox");
        whiteBox.style.height = window.innerHeight/100 * 80 + "px";
    }
于 2012-11-10T04:48:06.410 に答える