为什么我的页脚背景颜色不起作用？

Question

＆＃13;

＆＃13;

#footer {
  background-color: #B40404;
}
#footerleft {
  background-color: #B40404;
  padding: 20px;
  float: left;
  width: 30%;
  text-align: left;
}
#footerleft span {
  text-decoration: none;
  display: table;
  color: #F79F81;
}
#footerleft span a {
  text-decoration: none;
  color: #F79F81;
}
#footerleft span a:hover {
  text-decoration: none;
  color: #FF0000;
}
#footerright {
  background-color: #B40404;
  float: right;
  padding: 20px;
  width: 30%;
}
#footerright span {
  padding: 5px;
  text-decoration: none;
  display: table;
  color: #F79F81;
}
#footerright span a {
  text-decoration: none;
  color: #F79F81;
}

＆＃13;

<div id="footer">
  <div id="footerleft">
    <span><a href="#about">About Us</a></span>
    <span><a href="#tours">Tours</a></span>
    <span><a href="#bookings">Bookings</a></span>
    <span><a href="#contact">Contact Us</a></span>
    <span><a href="#southafrica">South Africa</a></span>
    <span><a href="#kenya">Kenya</a></span>
    <span><a href="#special">Special</a></span>
    <span><a href="#feedback">Feedback</a></span>
    <span><a href="#photogallery">Photo Gallery</a></span>
    <span><a href="#help">Help</a></span>
  </div>
  <div id="footerright">
    <span>Phone: 07 1441 2882</span>
    <span>Email: <a href="kibokotravels@gmail.com">kibokotravels@gmail.com</a></span>
    <span>Address: Level 8, 17 Melbourne Street, West End, 4101 QLD.</span>
    <span>BUSINESS HOURS: 9AM - 4PM</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

有人可以在他们的计算机上试用我的代码并让我知道这是否有用。 当我在chrome或IE中运行时，背景颜色没有显示出来。 有人可以帮我弄清楚什么是错的，并帮我找出错误的一点吗？

Answer 1

#footer背景未被应用，因为#footer元素本身的高度为0，因为它只有浮动内容。

解决方案是确保内容增长：

#footer{
    background-color:#B40404;
    overflow: auto;
}

More information on this problem (and alternate dirty solutions like using clear: both;) on Quirksmode

Answer 2

使用 clearfix

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

＆＃13;

＆＃13;

*{
    padding: 0;
    margin: 0;    
}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

#footer {
    background-color: #B40404;
    width: 100%;
    
}
#footerleft {
  background-color: #B40404;
  padding: 20px;
  float: left;
  width: 30%;
  text-align: left;
}
#footerleft span {
  text-decoration: none;
  display: table;
  color: #F79F81;
}
#footerleft span a {
  text-decoration: none;
  color: #F79F81;
}
#footerleft span a:hover {
  text-decoration: none;
  color: #FF0000;
}
#footerright {
  background-color: #B40404;
  float: right;
  padding: 20px;
  width: 30%;
}
#footerright span {
  padding: 5px;
  text-decoration: none;
  display: table;
  color: #F79F81;
}
#footerright span a {
  text-decoration: none;
  color: #F79F81;
}

＆＃13;

<div id="footer" class="clearfix">
  <div id="footerleft">
    <span><a href="#about">About Us</a></span>
    <span><a href="#tours">Tours</a></span>
    <span><a href="#bookings">Bookings</a></span>
    <span><a href="#contact">Contact Us</a></span>
    <span><a href="#southafrica">South Africa</a></span>
    <span><a href="#kenya">Kenya</a></span>
    <span><a href="#special">Special</a></span>
    <span><a href="#feedback">Feedback</a></span>
    <span><a href="#photogallery">Photo Gallery</a></span>
    <span><a href="#help">Help</a></span>
  </div>
    
  <div id="footerright">
    <span>Phone: 07 1441 2882</span>
    <span>Email: <a href="kibokotravels@gmail.com">kibokotravels@gmail.com</a></span>
    <span>Address: Level 8, 17 Melbourne Street, West End, 4101 QLD.</span>
    <span>BUSINESS HOURS: 9AM - 4PM</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;