3

I'm looking for a way to set the height of my div searchResults to 100% when I resize down to col-xs-12. When the searchFilter div shrinks down to col-xs-12 I hide it and its height is set to 20%. The div below it searchResults has a height of 80%, and when I resize down to col-xs-12 I want to change it's height to 100%.

I tried this in my css but it didn't work.

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

I also tried

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

Here is my html and 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>
Pindo
  • 1,585
  • 5
  • 16
  • 32
chuckd
  • 13,460
  • 29
  • 152
  • 331
  • 1
    please try rephrasing your question, as I've already read twice and didn't get it. – Pouya Ataei Aug 25 '15 at 04:24
  • Does the container of your `searchResults` div's parent have any `height` set? If no, you're percentage based heights _won't work_. – Ahmad Baktash Hayeri Aug 25 '15 at 04:34
  • I'd like to take a shot at your question but I don't have time right now. But here's my quick explanation on working with percentage heights in CSS. Maybe it will shed some light. Good luck! http://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Aug 25 '15 at 04:45

2 Answers2

5

Use media queries

@media only screen and (max-width : 480px) {
    /* only size 'xs' and below */
    .searchResults {
        height: 100%;
    }
}
MayThrow
  • 2,159
  • 4
  • 24
  • 38
  • I've never used media queries but if I want to set the height to 100% when the div is extra small wouldn't I want to set height to 100% and not 20 in your example above? – chuckd Aug 25 '15 at 04:27
3

H there, What you will need to look at ... use here is media queries at each breakpoint.

Use a media query for each size you what to change.

Just use your class searchFilter like this... 

@media (max-width: 768px) { 
.searchFilter {
height: 100%;
}
}

Have a look at this Bootstrap link about media queries.

Added to here:

Here is a working Fiddle for you to look at.
Just resize the window to see the height change at the media breakpoints.
Note I use vh and not % as I don't know what parent size you are working too here.

media queries resize

AngularJR
  • 2,752
  • 2
  • 16
  • 19
  • I tried inserting this into my styles section but the @media isn't found. Do I need to include something? – chuckd Aug 25 '15 at 05:10
  • Hi there, did you add this to your css file or in your html page? if in your html page did you place the code between `` I will see if I ccan make a Fiddle of this later when I have time. – AngularJR Aug 25 '15 at 06:12
  • I have added a Fiddle link above. Try the fiddle and resize the window. Hope this helps you. – AngularJR Aug 25 '15 at 08:11