0

我正在尝试设置一个具有两种背景颜色的页面。一种颜色用于页面的左半部分，另一种颜色用于页面的右半部分，内容位于水平居中的中间。如果页面中的内容没有垂直填满整个浏览器窗口，则内容结束，我可以看到它下面的两种背景颜色。有没有办法垂直扩展内容以始终填充浏览器窗口？我知道粘性页脚效果很好，但我似乎无法让它与我正在做的事情一起工作。

这是我的 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

你只需要添加 height:100%; 给你的wrapper和html,body：

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

#wrapper {
    position: relative;
    background: #006d46;
    height:100%;
}

小提琴

编辑＃1：

尝试这个 ：

html, body {
    margin: 0; padding: 0; border: 0; 
    display:table;
    height:100%;
    width:100%; 
}

添加display:table和width:100%

小提琴

于 2013-10-22T14:39:48.927 回答
1

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

您还缺少height:100%包装纸上的。

于 2013-10-22T14:44:11.740 回答