Html 如何在 CSS 中更改页脚的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28245492/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i change background color of footer in CSS
提问by RS92
I create footer with footer tag <footer>, but my problem is I can't to change background color
我用页脚标签创建页脚<footer>，但我的问题是我无法更改背景颜色
Here is a code:
这是一个代码：
HTML:
HTML：
<footer class="site-footer">
<div id="footer1"><p>Copyright 2013 Domain Name - All Rights Reserved </p></div>
<div id="footer2"><p> Template by OS Templates </p></div>
</footer>
CSS:
CSS：
.site-footer {
background: orange;
}
#footer1{
margin-left:2%;
float:left;
}
#footer2{
margin-right:2%;
float:right;
}
采纳答案by Kyle Booth
Just change your site-footerto an id instead of a class with some defined height. Fiddle here.
只需将您更改site-footer为 id 而不是具有某些定义高度的类。在这里摆弄。
<footer id="site-footer">
<div id="footer1"><p>Copyright 2013 Domain Name - All Rights Reserved </p></div>
<div id="footer2"><p> Template by OS Templates </p></div>
</footer>
#site-footer {
height: 50px;
background: red;
}
#footer1{
margin-left:2%;
float:left;
}
#footer2{
margin-right:2%;
float:right;
}
回答by imnancysun
Your #footer1 and #footer2 divs are covering the .site-footer div, that's why you can't see the background color, try apply background transparency on this two divs.
您的#footer1 和#footer2 div 覆盖了.site-footer div，这就是为什么您看不到背景颜色的原因，请尝试在这两个div 上应用背景透明度。
回答by Source
Try changing footer element to a div. Or using backgroun:inherit for #footer1 and #footer2
尝试将页脚元素更改为 div。或者使用 backgroun:inherit #footer1 和 #footer2
回答by ARWVISIONS
Since #footer1 and #footer 2 both float .site-footer has no height.
由于#footer1 和#footer 2 都浮动，因此 .site-footer 没有高度。
Use a clear fix on .site-footer
在 .site-footer 上使用明确的修复
hear is an example
听到就是一个例子
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
回答by Source
Add another div in after the footer divs, with style="clear:all".
在页脚 div 之后添加另一个 div，样式为 =“clear:all”。
回答by Source
Here you go, got it working for you
给你，让它为你工作
background:inherit;
http://jsfiddle.net/0Lz53cad/1/
http://jsfiddle.net/0Lz53cad/1/
If you don't want white space between the elements use padding instead of margin.
如果您不希望元素之间有空白，请使用填充而不是边距。
Just as I said. Please mark my answer as the right answer.
正如我所说。请将我的答案标记为正确答案。
