Div包装背景颜色不显示

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

如果您添加min-height: 170px，将会显示您的背景颜色。现在您的页脚在DOM中没有任何高度，因此没有显示颜色。

Answer 2

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

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

#FooterWrapper:after { 
    clear:both; 
} 

Answer 3

这是因为你的#FooterWrapper不包含float特性，但你的孩子div■找一个float: left;财产分配。

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

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

希望，这可以帮助你。

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

 
} 
 
#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="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>

Answer 5

试试这个： -

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 6

发现了另一个解决方案..告诉我，如果我上对跟踪..还是有错误或错误的代码？它似乎运作良好

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