CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapcss
chuckd
chuckd

Reputation: 14600

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

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>

Upvotes: 3

Views: 4053

Answers (2)

AngularJR
AngularJR

Reputation: 2762

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

Upvotes: 3

MayThrow
MayThrow

Reputation: 2201

Use media queries

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

Upvotes: 5

Related Questions