页脚引导Jumbotron区域直到页脚才开始

Question

我正在尝试使用Bootstrap 3构建一个页面。我希望下面的黄色区域在绿色页脚开始时结束。但是，相反，当黄色区域结束时，在页脚之前开始出现白色区域。我怎么解决这个问题？

这是我的黄色区域代码：

  <div class="jumbotron container-home-2" >
    <font color = "#FF8017">    

        <center>
        <h2>Responsa uma pesquisa aqui</h2>
        <form role="form">
           <div class="container">
              <div class="col-md-4">
              </div>
              <div class="col-md-4">
              <div class="form-group">
              <center><br>
              <input class="from-control input-home" type="text" placeholder="Insira o seu código de            pesquisa aqui" required autofocus>
              </center>
              <center>
              <button type="submit" placeholder="Insira o seu código de pesquisa aqui" class="btn btn-default"><h4>Ir para a pesquisa</h4></button>
              </h4>
              </center>
              </form>
              </div>
              <div class="col-md-4">
              </div>
           </div>
       </form>
      </font>  
    </center>
 </div>

黄色区域的CSS

.container-home-2 {
  background-color:#FFE700; 
  border-radius: 6px;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

页脚的HTML：

<footer class="footer-base panel-footer jumbotron">
        <font color=#ffffff><center>&copy; Company 2013</center></font>
  </footer>

页脚的CSS

.footer-base {
  background-color:#005200; 
  border-radius: 6px;
  position: relative;
  margin-top:150px;
  clear:both;
  padding-top: 20px;
}

Answer 1

要删除上边距，或者如果任何其他css也可以设置边距，则将其设置为0px。来自.footer-base：

margin-top:150px;

同样来自.container-home-2的底边：

margin-bottom: 20px;

这两个边缘在绿色和黄色区域之间产生了170px的差距。如果没有这两个，现在将触及。

demo fiddle