页脚背景无法正确显示？

Question

我想实现这个目标：

我已经实现了这个目标：

为什么页脚背景无法正确显示。另外，为什么“家庭功能”部分的保证金底部不起作用？该页面位于http://goo.gl/OpAB4V

标记：

<section id="home-features">
<article class="home-feature-box">
<img src="images/tellerest-homepage-design_33.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed felis porttitor elementum</p>
</article>
<article class="home-feature-box">
<img src="images/tellerest-homepage-design_33.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed felis porttitor elementum</p>
</article>
<article class="home-feature-box-right">
<img src="images/tellerest-homepage-design_33.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed felis porttitor elementum</p>
</article>
</section>
<footer>
<p>Copyright &copy; 2014, Tellerest. All Rights Reserved.</p>
</footer>

CSS：

/* home features section */
#home-features { margin: 40px auto 0 auto; width: 950px; text-align: center;}
.home-feature-box { width: 256px; float:left; margin-right: 91px;}
.home-feature-box-right { width: 256px; float:right;}
#home-features p { font-family:Verdana, Geneva, sans-serif; font-size: 14px; font-weight: normal; line-height: 24px; color: #4f4f4f;}

/* footer */
footer { background-color: #fafafa; border-top: 1px solid #e0e0e0; text-align: center; font-family:Verdana, Geneva, sans-serif; font-size: 11px; font-weight: normal; color: #a3a3a3; padding: 15px 0 30px 0;}

Answer 1

你必须清理你的花车。

在上一篇文章之后，添加此div：

<div style="clear:both"></div>

当然，你应该简单地创建一个＆＃34; clear＆＃34;类而不是内联样式，但你明白了。

观察后，我发现你的#container div的固定高度为1000px。只需删除它。

Answer 2

只需将您的#container类更改为以下代码即可。

#container {
  background-image: url("images/tellerest-homepage-design2_01.png");
  background-position: center top;
  background-repeat: repeat-x;
  overflow: hidden;
}

Answer 3

您已为height:1000px

提供了#container

删除该高度并清除div

 <section id="container">
.
.
.
<div class="clear"></div>

</section>

CSS for clear

.clear {
clear: both
}