2

I have a page with following html markup: 

<html>
    <head>...</head>
    <body>
        <div class="container">
            <header>...</header>

            <div class="wrapper">
                 <div class="row">
                     <div class="col-md-8">...</div>
                     <div class="col-md-3 col-md-offset-1 col-aside">
                         <aside>...</aside>
                     </div>
                 </div>
             </div>
        </div>
    </body>
 </html>

I set 100% height for: 

html, body, body > .container {
    height: 100%;
}

.wrapper {
    min-height: 100%;
}

.wrapper > .row {
    min-height: 100%;
}

.col-aside {
    min-height: 100%;
}

So I want that both my columns have minimum height of 100%. While inspecting my page with chrome developer tools I realized that .row and .col-aside don't get 100% height. I am a little bit lost because I saw answers dealing with display: table but I'm pretty sure it's not necessary since I managed to do this layout without bootstrap using just divs and their heights.

So have to stretch columns so that they have min-height: 100% preferably without using display: table and position: absolute?

updated: jsfiddle http://jsfiddle.net/U6H6W/ . Something like that, here you can see that .row doesn't get 100% height in spite of the fact that .wrapper gets 100%

Victor
  • 5,073
  • 15
  • 68
  • 120
  • `neither .row nor .col-aside don't get 100% height.` You have 3 negatives here, please clarify using proper english. – Jordan.J.D Jul 24 '14 at 12:49
  • might be helpful for you. http://stackoverflow.com/questions/17555682/height-100-or-min-height-100-for-html-and-body-elements – Kheema Pandey Jul 24 '14 at 12:54
  • see if adding '!important' fixes your problem... it should override any other stylesheet settings.. for example: min-height: 100% !important; – kasparg Jul 24 '14 at 12:59
  • JordanD, sorry, I've edited my post. row and col-aside don't get 100% height. Both of them. – Victor Jul 24 '14 at 13:09
  • kasparg, I've tried that thing. I think I'll make a jsfiddle with example to show my case – Victor Jul 24 '14 at 13:10
  • Using jquery you can get the height (100% can be difficult) with $(document).height(); – Jordan.J.D Jul 24 '14 at 13:30
  • Well, I have many choices. I've already managed to stretch aside to 100% by setting position: relative to .wrapper and position: absolute to aside. But I can't get it why simply setting 100% height doesn't work :( – Victor Jul 24 '14 at 13:34

2 Answers2

2

A better solution would be to use viewport height, e.g.:

.col-aside {
     height: 100vh;
}

You can easily specify the height of one div, without having to specify the height of the higher level HTML blocks.

Viewport is supported in all modern browsers, and as far back as IE9. IE8 does not support viewport, but if you need legacy support going back that far you can set a fallback to height: 100% (making sure you cover all of the containing blocks.)

Here is a jsbin to demonstrate:

http://jsbin.com/zeyuraka/1/edit

Charlie
  • 1,117
  • 9
  • 12
0

When dealing with heigth:100%, all the parents should be in height:100%. If one isn't, then no child is.

The 100% approach is complicated, especially when it comes to many childs with padding or margins. It could not display what you expect (i.e. exceed screen size).

You could try position: fixed, with bottom:0, but you will have to handle the position of the non-fixed div.

Erwann
  • 41
  • 2