title: Changing height on div in css when resizing page using Twitter Bootstrap
body: <p>I'm looking for a way to set the height of my div <code>searchResults</code> to 100% when I resize down to <code>col-xs-12</code>. When the <code>searchFilter</code> div shrinks down to <code>col-xs-12</code> I hide it and its height is set to 20%. The div below it <code>searchResults</code> has a height of 80%, and when I resize down to <code>col-xs-12</code> I want to change it's height to 100%.</p>
  
  <p>I tried this in my css but it didn't work.</p>
  
  <pre><code>.searchResults .col-xs-12 {
      height: 100%;
  }
  </code></pre>
  
  <p>I also tried</p>
  
  <pre><code>.searchResults &gt; .col-xs-12 {
      height: 100%;
  }
  </code></pre>
  
  <p>Here is my html and css</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.searchFilter {
    height: 20%;
  }
  .searchResults {
    height: 80%;
  }
  .searchResults .col-xs-12 {
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-5 col-md-5 col-sm-5 hidden-xs"&gt;
        @*Sidebar*@
        &lt;div id="googleResultMap"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-7 col-md-7 col-sm-7 col-xs-12"&gt;
        @*Body content*@
        &lt;div class="searchFilter col-lg-12 col-md-12 col-sm-12 hidden-xs"&gt;
          hi
        &lt;/div&gt;
        &lt;div class="searchResults col-lg-12 col-xs-12 col-sm-12"&gt;
          @*some content here left out*@
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>