Divラッパー背景色が表示されない

Question

フッターの背景色が表示されない

何が欠けていますか？

テストサイトは、私が...要求されるように、余分な単語を追加してい...言って他に何か分からないので、それはそのOK

HTML言うまで私はタイピングを続けるhttp://qtest.pw

です

<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

これを追加して、inに含まれる項目の浮動小数点数をクリアしてください。

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

#FooterWrapper:after { 
    clear:both; 
} 

Answer 3

あなた#FooterWrapperがfloatプロパティが含まれていませんが、あなたの子供がdiv sが割り当てられ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; 
}