如何摆脱空间时，调整引导div浏览器的大小

Question

当我将浏览器的大小调整为移动大小时，我在div的[Searchareadiv和Stepsdiv]之间得到了大量的间隙。但是，在pc模式下，没有差距。我尝试了边际顶部和底部，但是，我无法找出错误。请帮忙。谢谢。代码如下:

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>

bootp