html - 如何获得双页脚？

Question

我希望我的页脚能够很好地适应两行。但是我所拥有的拉伸(stretch)不够，底部应该是白色但显示为黑色背景。

    <footer>
  <div id="footer">
    <div class="inner-wrap clearfix">
      <div class="section about">

      </div>
  </div>
  <div id="bottom-footer">
    <div class = "inner-wrap clearfix">
      <p class="fotter-quote">
        <em>
          <i class = "fa fa-quote-left"></i>just live your life<i class = "fa fa-quote-right"></i>
        </em>

      </p>
    </div>
    <p>
  </div>
</footer>

这是我的CSS

footer #footer {
  width:100%;
  background-color: #222;
  padding: 60px 0px;
}

footer #bottom-footer{
  background-color: white;
}

Answer 1

我不知道这有什么难的

这是 Code

HTML

<div class="content">
Here is the Content
</div>

<footer>
  <div id="footer">
    <div class="inner-wrap clearfix">
      <div class="section about">
Footer 1
      </div>
  </div>
  </div>



   <div id="bottom-footer">
    <div class = "inner-wrap clearfix">
     Footer 2
    </div>

  </div>

</footer>

CSS

body{margin:0;padding:0}
.content{background:white; width:100%; height:700px}
#footer{    background: #2c3036;width:100%; height:300px}
#bottom-footer{background: #16a085;height:40px}