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