Question

我在设置正确的CSS时遇到问题

这是我玩的小代码：

<!DOCTYPE html>

<html>
<head>
    <style type="text/css">
        *          { margin: 0; padding:0; }
        html, body { width: 100%; height: 100%; background: #abc; }
        #container { background: #eee; width: 100%; height:100%;}
        #sidebar   { background: #a0f; width: 200px; height: 500px; position: absolute; left: 0px; top: 0px; }
        #content   { background: #777; margin-left: 200px; width: auto; height: 100%; }
        #wrapper   { background: #357; height: auto; padding: 10px;}

        #column1   { background: #0f0; width: 66%; float: left; }
        #column2   { background: #f00; width: 33%; float: right; }
        #text1     { background: white; width:80%; min-width: 300px; margin: 0 auto;}
        #text2     { background: white; width:80%; min-width: 300px; margin: 0 auto;}
    </style>
</head>
<body>
    <div id="container">
        <div id="sidebar">
        </div><!-- end sidebar -->
        <div id="content">    
            <div id="column1">
                <div id="text1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div><!-- end column1 -->
            <div id="column2">
                <div id="text2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div><!-- end column2 -->
        </div><!-- end content -->
    </div><!-- end container -->
</body>
</html>

这应该是左侧固定侧边栏和右侧流体内容区域的页面。在简短的页面中，我希望#content的背景颜色延伸到屏幕的底部（这是有效的）。在长页面上，我希望该背景延伸到页面末尾（这不是）。

我已经为所有元素添加了颜色以查看其中的位置，但最终#content背景将为白色，透明度为0.9，并且body上会有背景图片。

如何解决这个问题？

更新：请参阅此处的工作示例：http://jsbin.com/AXUmALU/1/edit?html,output - 只需向上滚动输出即可查看颜色中断。

Answer 1

我想我有what you want here。在css中，我为clearfix类添加了一些选择器，这很常见。它看起来像这样：

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

我将该课程添加到#content这个css来自HTML5 Boilerplate，你可以谷歌。我也改变了

#content { height: 100%; }至#content { min-height: 100%; }

如果需要，内容可以扩展到超出屏幕的大小。

如何使背景颜色一直延伸到页面/内容的底部？

1 个答案: