Twitter Bootstrap Question posted in

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>
Tags:

2

Answers


  1. 0

    Use media queries

    @media only screen and (max-width : 480px) {
    /* only size 'xs' and below */
    .searchResults {
        height: 100%;
    }
}
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search