html - 调整 bootstrap div 浏览器大小时如何摆脱空间？

Question

当我将浏览器调整为移动尺寸时，两个 div [Searcharea div 和 Steps div] 之间出现大量间隙。但是，在 pc 模式下，没有差距。我尝试了 margin top 和 bottom 但是，我无法找出错误。请帮忙 。谢谢。下面是代码。

HTML 代码:

<div class="searcharea col-md-12">

            <div class="head col-md-12 col-xs-12">
                <h1> Search for your own seat. </h2>
            </div>

            <div class="col-md-12 col-xs-12">
                <div class="input-group custom-search-input">
                  <input type="text" class="form-control">
                  <span class="input-group-btn">
                  <button class="btn btn-danger" type="button">
                  <span class="glyphicon glyphicon-search"></span> CLICK
                 </button>
                 </span>
                 </div><!-- /input-group -->
            </div>

    </div>     <!-- Search Bar ENDs --> 

    <div class="steps col-md-12 col-xs-12">
        <div class="find col-md-12">
            <h2 class="findhead">Finding Nearby ! </h2>
        </div>
    </div>

CSS:

.searcharea{
background-image: url(restback.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 600px;
margin-top: 0px;
}

.custom-search-input {
    margin:5%;
    width: 60%;
    margin-left: 20%;

}
.head{
color: #ffffff;
margin-top: 15%;

text-align: center;
}
.steps {
background-color: lightblue;
height: 700px;
margin-top: 0px;
}
.find{
text-align: center;
}

Answer 1

问题在于您的固定高度，即高度:600px；

/* CSS used here will be applied after bootstrap.css */

.searcharea {
  background-image: url('http://placehold.it/1200x600');
  background-repeat: no-repeat;
  background-size: 100% 100%; // Add
  min-height: 300px; // Add
}
.custom-search-input {
  margin: 0 auto; // Replaced
  width: 60%;
  padding-bottom: 5%; // Add
}
.head {
  color: #ffffff;
  margin-top: 15%;
  text-align: center;
}
.steps {
  background-color: lightblue;
  height: 700px;
  margin-top: 0px;
}
.find {
  text-align: center;
}

<div class="searcharea col-md-12">

  <div class="head col-md-12 col-xs-12">
    <h1> Search for your own seat. </h1>
  </div>

  <div class="col-md-12 col-xs-12">
    <div class="input-group custom-search-input">
      <input class="form-control" type="text">
      <span class="input-group-btn">
                  <button class="btn btn-danger" type="button">
                  <span class="glyphicon glyphicon-search"></span> CLICK
      </button>
      </span>
    </div>
    <!-- /input-group -->
  </div>

</div>
<!-- Search Bar ENDs -->

<div class="steps col-md-12 col-xs-12">
  <div class="find col-md-12">
    <h2 class="findhead">Finding Nearby ! </h2>
  </div>
</div>

Bootply