CSS背景小于div高。

Question

请帮帮我，我无法理解我的简单代码的结果：

<div id="wrapper-top">
    <div class="wrapper">
        <div id="logo">logo</div>
        <div id="menu">menu</div>
        <div id="content">
            <div class="block-1-1">text</div>
            <div class="block-3-1">text</div>
            <div class="block-3-2">text</div>
            <div class="block-3-3">text</div>
        </div>
    </div>
</div>

和css文件：

#wrapper-top
{
    width: 100%;
    background-color: gray;
}
.wrapper
{
    margin: 0 150px 0 150px;
}
#logo
{
    width: 100%;
    height: 50px;
}
#menu
{
    width: 100%;
    height: 50px;
    background-color: navajowhite;
}
#content
{
    width: 100%;
    background-color: white;
}
.block-1-1
{
    width: 100%;
    text-align:center;
    background-color: pink;
}
.block-3-1
{
    float:left;
    width:33%;
    text-align:center;
    background-color: violet;
}
.block-3-2
{
    float:left;
    width:34%;
    text-align:center;
    background-color: blueviolet;
}
.block-3-3
{
    float:left;
    width:33%;
    text-align:center;
    background-color: yellowgreen;
}

为什么divs .块-3-1、.块-3-2和.块-3-3似乎在div .wrapper之外.

​

我没有料到这一点，因为我想在.wrapper中设置这个街区。

http://jsfiddle.net/4yvLv853/1/

Answer 1

您需要在#content div中包含浮动项。

一种方法(还有其他方法，如详细的here)是使用overflow:hidden

#content
{
    width: 100%;
    background-color: white;
    overflow: hidden;
}

JSfiddle Demo

Answer 2

使用clearfix

​

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}



#wrapper-top
{
    width: 100%;
    background-color: gray;
    border: solid blue 1px;
}
.wrapper
{
    margin: 0 150px 0 150px;
    border: solid brown 1px;
}


#logo
{
    width: 100%;
    background-color: white;
}
#menu
{
    width: 100%;
    background-color: navajowhite;
}
#content
{
    width: 100%;
    background-color: white;
}
.block-1-1
{
    width: 100%;
    text-align:center;
    background-color: pink;
}
.block-3-1
{
    float:left;
    width:33%;
    text-align:center;
    background-color: violet;
}
.block-3-2
{
    float:left;
    width:34%;
    text-align:center;
    background-color: blueviolet;
}
.block-3-3
{
    float:left;
    width:33%;
    text-align:center;
    background-color: yellowgreen;
}

<div id="wrapper-top">
    <div class="wrapper clearfix">
        <div id="logo">logo</div>
        <div id="menu">menu</div>
        <div id="content">
            <div class="block-1-1">block-1-1</div>
            <div class="block-3-1">block-3-1</div>
            <div class="block-3-2">block-3-2</div>
            <div class="block-3-3">block-3-3</div>
        </div>
    </div>
</div> 

​

Answer 3

试一试

<div id="wrapper-top">
    <div class="wrapper" style="height: 400px"> //You can add this in CSS if you want.
        <div id="logo">logo</div>
        <div id="menu">menu</div>
        <div id="content">
            <div class="block-1-1">text</div>
            <div class="block-3-1">text</div>
            <div class="block-3-2">text</div>
            <div class="block-3-3">text</div>
        </div>
    </div>
</div>

我觉得包装的高度太小了。

或者，如果您希望.wrapper div保持它的高度，尝试将#content更改为

#content {
overflow-y: scroll;
overflow-x: hidden;  //this gets rid of the pesky bottom scrollbar
}