CSS背景低于div hight

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;
}

为什么div .block-3-1 ， .block-3-2 和 .block-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
}