3

看下面的html和css。我已将#wrapper 的宽度设置为 990 像素，中心列的完整宽度为 960 像素。两边都有15px的边距。因此，包装 div 的背景颜色应该显示在 #left 和 #content div 后面。但是，如果我设置#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>
4

3 回答 3

3

因为 Wrapper 包含浮动元素，所以您需要“清除”这些元素，否则 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/

另外，请查看之前回答相同问题的一些问题。EG我可以使用哪些“clearfix”方法？

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

于 2012-07-13T13:22:07.393 回答
0

添加高度：100%；向左 。

结果样式将是

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

希望这可以帮助。

于 2012-07-13T13:20:43.927 回答
0

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

<div id="wrapper">
            <div id="left">
                left
            </div>
            <div id="content"></div>   
    <div style="clear:both;"></div>
</div
于 2012-07-13T13:22:55.183 回答