javascript - Changing height on div in css when resizing page using Twitter Bootstrap -

i'm looking way set height of div searchresults 100% when resize down col-xs-12. when searchfilter div shrinks down col-xs-12 hide , height set 20%. div below searchresults has height of 80%, , when resize down col-xs-12 want change it's height 100%.

i tried in css didn't work.

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

i tried

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

here 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>

use media queries

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