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 .block-3-1, .block-3-2 and [=26= .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

尝试

<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 高度太小了。

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

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

Answer 3

使用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>

CSS 背景小于 div 高度

CSS background is less than div hight

html

css

word-wrap

css-float