Div Wrapper背景颜色不显示

Question

我的页脚背景颜色未显示...

我错过了什么？

测试网站为http://qtest.pw

我正在按要求添加额外的单词...不知道还有什么要说的......所以我会一直打字直到它说好了

HTML

  <div id="FooterWrapper">  
    <div id="FooterDiv1"><img src="images/ada-logo.png" alt="American dental Association - Helmich Dental">
    </div>
    <div id="FooterDiv2">
    </div>
    <div id="FooterDiv3">
    </div>
    <div id="FooterDiv4">
  </div> 

CSS

#FooterWrapper {
    clear: both;
    margin: auto;
    max-width: 1232px;
    display: block;
    padding-left: calc((100% - 1232px)/2);
    padding-right: calc((100% - 1232px)/2);
    background-color: #000;
}
#FooterDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 19%;
    display: block;
    padding: 2%;
}
#FooterDiv2 {
    clear: none;
    float: left;
    margin-left: 0;
    width: 19%;
    display: block;
    padding: 2%;
}
#FooterDiv3 {
    clear: none;
    float: left;
    margin-left: 0;
    width: 19%;
    display: block;
    padding: 2%;
}
#FooterDiv4 {
    clear: none;
    float: left;
    margin-left: 0;
    width: 19%;
    display: block;
    padding: 2%;
}

Answer 1

尝试添加此项以清除包含在其中的项目上的浮动;

#FooterWrapper:before,
#FooterWrapper:after {
    content:"";
    display:table;
}

#FooterWrapper:after {
    clear:both;
}

Answer 2

这是因为您的#FooterWrapper不包含float属性，但您的孩子div已分配float: left;属性。

因此，如果您将以下属性添加到#FooterWrapper，则可以获得预期的背景颜色。

#FooterWrapper {
  width: 100%;
  float: left;
}

希望，这对你有帮助。

Answer 3

试试这个： -

＆＃13;

＆＃13;

body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
    background:#3F6A8A;

}
#FooterWrapper {
    clear: both;
    margin: auto;
    max-width: 1232px;
    display: block;
    padding-left: calc((100% - 1232px)/2);
    padding-right: calc((100% - 1232px)/2);
   

}
#FooterDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 19%;
    display: block;
    padding: 2%;
}
#FooterDiv2 {
    clear: none;
    float: left;
    margin-left: 0;
    width: 19%;
    display: block;
    padding: 2%;
}
#FooterDiv3 {
    clear: none;
    float: left;
    margin-left: 0;
    width: 19%;
    display: block;
    padding: 2%;
}
#FooterDiv4 {
    clear: none;
    float: left;
    margin-left: 0;
    width: 19%;
    display: block;
    padding: 2%;
}

＆＃13;

 <div id="FooterWrapper">  
    <div id="FooterDiv1"><img src="https://i.ytimg.com/vi/s9dbAfjlrks/maxresdefault.jpg" alt="American dental Association - Helmich Dental">
    </div>
    <div id="FooterDiv2">
    </div>
    <div id="FooterDiv3">
    </div>
    <div id="FooterDiv4">
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

试试这个： -

body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
    background:#3F6A8A;

}
#FooterWrapper {
    clear: both;
    margin: auto;
    max-width: 1232px;
    display: block;
    padding-left: calc((100% - 1232px)/2);
    padding-right: calc((100% - 1232px)/2);
    background-color:#000; 
}
#FooterDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 19%;
    display: block;
    padding: 2%;
}
#FooterDiv2 {
    clear: none;
    float: left;
    margin-left: 0;
    width: 19%;
    display: block;
    padding: 2%;
}
#FooterDiv3 {
    clear: none;
    float: left;
    margin-left: 0;
    width: 19%;
    display: block;
    padding: 2%;
}
#FooterDiv4 {
    clear: none;
    float: left;
    margin-left: 0;
    width: 19%;
    display: block;
    padding: 2%;
}

<div id="FooterWrapper">  
    <div id="FooterDiv1"><img src="images/ada-logo.png" alt="American dental Association - Helmich Dental">
    </div>
    <div id="FooterDiv2">
    </div>
    <div id="FooterDiv3">
    </div>
    <div id="FooterDiv4">
  </div>

Answer 5

找到另一个解决方案..告诉我，如果我在正确的轨道上..或者是否有错误或错误的代码？它似乎运作良好

http://qtest.pw

感谢所有贡献!!!

HTML

  <div id="FooterWrapper">  
    <div id="FooterDiv1"><a href="http://www.mouthhealthy.org/en/" target="new"><img src="images/ada-logo.png" alt="American dental Association - Helmich Dental" class="imagecenter"></a>
    </div>
    <div id="FooterDiv2">
    </div>
    <div id="FooterDiv3">
    </div>
    <div id="FooterDiv4">
  </div>  
</div>

CSS

#FooterWrapper {
    clear: both;
    margin: auto;
    overflow: hidden;
    max-width: 1232px;
    display: block;
    padding-left: calc((100% - 1232px)/2);
    padding-right: calc((100% - 1232px)/2);
    background-color: #000;
}
#FooterDiv1 {
    clear: both;
    margin-left: 1.6%;
    width: 23.4%;
    display: block;
}
#FooterDiv2 {
    clear: none;
    width: 25%;
    display: block;
}
#FooterDiv3 {
    clear: none;
    width: 25%;
    display: block;
}
#FooterDiv4 {
    clear: none;
    margin-right: 1.6%;
    width: 23.4%;
    display: block;
}

Answer 6

如果添加 <receiver android:enabled="true" android:name=".BootUpReceiver" android:permission="android.permission.RECEIVE_BOOT_COMPLETED"> <intent-filter> <action android:name="android.intent.action.BOOT_COMPLETED" /> <category android:name="android.intent.category.DEFAULT" /> </intent-filter> </receiver> ，将显示您的背景颜色。现在你的页脚在DOM中没有任何高度，所以没有颜色显示。