Question

查看下面的html和css。我已将#wrapper的宽度设置为990像素，中心列的完整宽度为960像素。两侧都有15px的保证金。因此，包装div的背景颜色应该显示在#left和#content divs后面。但是，如果我设置#wrapper的高度，它确实显示背景。但我希望它显示为完整。

我只是CSS布局的初学者。

<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
}
#header{
margin:0 auto;
width:100%;
background:#efffff;
height:100px;
}
#footer{
margin:0 auto;
clear:both;
width:100%;
background:#ccc;
height:100px;
}
#wrapper{
width:990px;
margin:0 auto;
background:#000;
display:block;
}
#left{
margin:0 0 0 15px;
background:#eeffee;
width:200px;
float:left;
}
#content{
margin:0 15px 0 0;
background:#eeeeee;
width:760px;
float:left;
}
</style>
</head>
    <body>
        <div id="header">
            header
        </div>
        <div id="wrapper">
            <div id="left">
                left
            </div>
            <div id="content">
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
                content<br/>
            </div>
        </div>

        <div id="footer">
            Footer
        </div>
    </body>
</html>

Answer 1

因为Wrapper包含浮动元素，所以你需要“清除”这些元素，否则包装器不会包裹它们。有多种方法可以做到这一点，但最常用的方法是在包装器上使用clearfix类。

将以下代码添加到您的css：

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}

然后在class="clearfix"元素上设置<div id="wrapper">。所以它会变成：

<div id="wrapper" class="clearfix">

这个特殊的解决方案被称为micro clearfix hack，更多信息可以在这里找到： http://nicolasgallagher.com/micro-clearfix-hack/

这是一个显示结果的jsfiddle： http://jsfiddle.net/PWQru/1/

另外，请看一些回答相同问题的先前问题。例如。 What methods of ‘clearfix’ can I use?

关于各种方法，在这个问题上有一些很好的讨论。

Answer 2

添加高度：100％;到#left。

产生的风格将是

#left 
{
    background: none repeat scroll 0 0 #EEFFEE;
    float: left;
    height: 100%;
    margin: 0 0 0 15px;
    width: 200px;
}

希望这有帮助。

Answer 3

这是因为你的内容和左边的div都是浮动的。你必须在两个浮动的div的末尾引入一个div，使包装器覆盖这两个div。

<div id="wrapper">
            <div id="left">
                left
            </div>
            <div id="content"></div>   
    <div style="clear:both;"></div>
</div

为什么#wrapper的背景颜色不显示在左侧和内容列的后面？

3 个答案: