javascript - 使用 Twitter Bootstrap 调整页面大小时更改 css 中 div 的高度

Question

我正在寻找一种方法，当我将尺寸缩小到 col-xs-12 时，将我的 div searchResults 的高度设置为 100%。当 searchFilter div 缩小到 col-xs-12 时，我将其隐藏并将其高度设置为 20%。它下面的 div searchResults 的高度为 80%，当我调整到 col-xs-12 时，我想将它的高度更改为 100%。

我在我的 css 中试过了，但没有用。

.searchResults .col-xs-12 {
    height: 100%;
}

我也试过

.searchResults > .col-xs-12 {
    height: 100%;
}

这是我的html和css

.searchFilter {
  height: 20%;
}
.searchResults {
  height: 80%;
}
.searchResults .col-xs-12 {
  height: 100%;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 hidden-xs">
      @*Sidebar*@
      <div id="googleResultMap"></div>
    </div>
    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
      @*Body content*@
      <div class="searchFilter col-lg-12 col-md-12 col-sm-12 hidden-xs">
        hi
      </div>
      <div class="searchResults col-lg-12 col-xs-12 col-sm-12">
        @*some content here left out*@
      </div>
    </div>
  </div>
</div>

Answer 1

使用media queries

@media only screen and (max-width : 480px) {
    /* only size 'xs' and below */
    .searchResults {
        height: 100%;
    }
}