html - 为什么这段代码不能设置从主要内容到底部的背景颜色

Question

我写了这段代码。此代码是 html 和 css。

...

#contents
{
    margin: 0px;
    padding: 0px;
    width: 100%;
    background-color: white;
    color: black;
    border-top: 3px solid black;
    background-image: url(img/CloverImage.png);
    background-size: 300px 400px;
    background-repeat: no-repeat;
}

#content
{
    margin: auto;
    padding: 50px;
    width: 860px;
    height: auto;
    color: black;
}

...

<div id="contents">
<div id="content">
<p id="title">What are we making?</p>
<div id="mainapp">
    <h1>Pegasus</h1>
    Pegasus is very useful wordpress poster application.<br>
    This app can input html tags easily.<br>
    We're making it to open to the public.
</div>
<div id="subapp1">
    <h1>A to Z</h1>
    HAHAHAHA
</div>
<div id="subapp2">
    <h1>A to Z</h1>
    HEHEHEHE
</div>
</div>
</div>

...

我想设置从主要内容到底部的背景颜色。

但是这段代码做不到。

这是网站。

http://www.clover.lrv.jp

告诉我一个解决方案给我。

Answer 1

您可以使用 clearfix 或 clear 类来处理 float 行为

清除类

HTML

<div id="content">
    <p id="title">What are we making?</p>
    <div id="mainapp"> 
        <h1>Pegasus</h1>
        Pegasus is very useful wordpress poster application.<br>
        This app can input html tags easily.<br>
        We're making it to open to the public.
    </div>
    <div id="subapp1">
        <h1>A to Z</h1>
        HAHAHAHA
    </div>
    <div id="subapp2">
        <h1>A to Z</h1>
        HEHEHEHE
    </div>
    <div class="cb"></div>
</div>

CSS

.cb{
    clear:both;
}

---

或使用 clearfix 类(基于 html5 样板文件)

HTML

<div id="content" class="clearfix">
    <p id="title">What are we making?</p>

CSS

.clearfix:before,
.clearfix:after{
    content: " ";
    display: table;
}
clearfix:after{
    clear: both;
}
/* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.clearfix {
    *zoom: 1;
}

还有很多其他方法可以清除 float ，但是，我希望你能理解这个概念。

您可以在这些地方找到有关 float 和清除 float 的更多信息:

Mozilla 开发者网络 https://developer.mozilla.org/en-US/docs/Web/CSS/float

网络平台 http://docs.webplatform.org/wiki/css/properties/clear

Micro clearfix [html5 样板文件使用它] http://nicolasgallagher.com/micro-clearfix-hack/