0

2 つの背景色を持つページを設定しようとしています。ページの左半分に 1 つの色、ページの右半分に 1 つの色、および水平方向に中央に配置された中央のコンテンツに使用します。ページ内のコンテンツがブラウザー ウィンドウ全体を垂直方向に満たしていない場合、コンテンツは終了し、その下に 2 つの背景色が表示されます。コンテンツを垂直方向に拡張して常にブラウザー ウィンドウを埋める方法はありますか? スティッキーフッターがうまく機能することは知っていますが、私がやっていることでそれを機能させることができないようです.

ここに私のHTMLがあります：

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
    <div id="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
    </div>
</div>
<div id="footer">Footer footer footer</div>

これは私のCSSです：

html, body {
    margin: 0; padding: 0; border: 0; 
}
#left, #right {
    position: fixed;
    width: 50%;
    height: 100%;
    top: 0;
}
#left {
    background: #014c8d;
    left: 0;
}
#right {
    background: #0f2451;
    right: 0;
}
#container {
    background: #fff;
    width: 70%;
    max-width: 500px;
    height: 100%;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}
#wrapper {
    position: relative;
    background: #006d46;
}
#footer {
    background: #006d46;
    position: relative;
}

現在持っているものを表示するjsfiddleがあります：http://jsfiddle.net/snPYb/1/

4

2 に答える 2

1

http://jsfiddle.net/snPYb/3/

あなたが見逃していたのheight:100%は、ラッパーにもありました。

于 2013-10-22T14:44:11.740 に答える