1

我在正确设置 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 - 只需向上滚动输出即可查看颜色中断。

4

1 回答 1

2

我想我这里有你想要的。在 css 中，我为一个clearfix类添加了一些选择器，这很常见。它看起来像这样：

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

我将该类添加到#contentThis css is from HTML5 Boilerplate 中，您可以使用谷歌搜索。我也变了

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

以便内容可以根据需要扩展超出屏幕的大小。

于 2013-10-01T19:15:03.273 回答