Question

我正在尝试为我的页脚设置背景颜色，但它并没有真正改变背景颜色。这是我到目前为止所做的。

在我的代码中：我用body标签包裹了页脚。这意味着页脚位于body标签内。

.HTML：

<footer>
<div id="footer_box">

                <p id="footer_text_left">

                © 7 seas<br />                                          

                En del av 7seas Money Transfer KB<br />                 
                F-skatt registrerat  <br />                                         
                Org, Nr: <br />   

                SEB Företagskonto: <br />
                BG: 

                </p>

                <p id="footer_text_middle">
                Besökadress:<br /> 
                218 41 Bunkeflostrand<br /> 
                Malmö, Sweden <br />  


                Web:

                </p>

            <p id="footer_text_right">


                Tel: <br />
                 Mob: <br />
                 e-Mail:

                </p>

</div>

        </footer>

.CSS：

#footer_box{
    border-top:2px solid #009933;

     background-color:green;

    }



    #footer_text_middle, #footer_text_right{

    font-size:12px;
    font-family:Euphemia;
    float: left;
    width: 28%;
    margin: 0 1%;
    padding-bottom:15px;


    }
    #footer_text_left{
    font-size:12px;
    font-family:Euphemia;
    float: left;
    width: 31%;
    margin-left: 120px;

    padding-bottom:15px;
    }

Answer 1

您需要在footer_box元素上使用clearfix类：

<div id="footer_box" class="clearfix">

并在css中添加：

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}

现在应该可以了。

Answer 2

在您的css中添加overflow: auto：

#footer_box{
    overflow: auto;
    border-top:2px solid #009933;
    background-color:green;
}

这里是Fiddle。

Answer 3

只需将绿色背景添加到#footer_text_left，#footer_text_middle和#footer_text_right <p>标记。

#footer_box, #footer_text_left, #footer_text_middle, #footer_text_right{
    border-top:2px solid #009933;

     background-color:green;

    }



    #footer_text_middle, #footer_text_right{

    font-size:12px;
    font-family:Euphemia;
    float: left;
    width: 28%;
    margin: 0 1%;
    padding-bottom:15px;


    }
    #footer_text_left{
    font-size:12px;
    font-family:Euphemia;
    float: left;
    width: 31%;
    margin-left: 120px;

    padding-bottom:15px;
    }

<div id="footer_box">

                <p id="footer_text_left">

                © 7 seas<br />                                          

                En del av 7seas Money Transfer KB<br />                 
                F-skatt registrerat  <br />                                         
                Org, Nr: <br />   

                SEB Företagskonto: <br />
                BG: 

                </p>

                <p id="footer_text_middle">
                Besökadress:<br /> 
                218 41 Bunkeflostrand<br /> 
                Malmö, Sweden <br />  


                Web:

                </p>

            <p id="footer_text_right">


                Tel: <br />
                 Mob: <br />
                 e-Mail:

                </p>

</div>

Answer 4

添加：overflow:auto;应该诀窍

与您的问题无关，<br/>的使用有点不受欢迎。如果将每个句子存储到<p>并给出一个带margin-bottom的类，那会更好。

只是一个想法

为什么背景颜色不起作用？

4 个答案: