100 % height - relative div with header

Question

As almost everyone on the web I am having difficulties getting my sidebar to 100% page fill.

I have a header under which I want to put a sidebar and content:

---------------------------
-       header            -
---------------------------
-  s    -        c        -
-  i    -        o        -
-  d    -        n        -
-  e    -        t        -
-  b    -        e        -
-  a    -        n        -
-  r    -        t        -
---------------------------

I want the sidebar to be 100% height, but the only way I seemed to be able to get it to work is to make the sidebar "position:fixed". Because I want the website to be responsive, fixed is not the solution for that.

JSfiddle of current site

Short version:

<body>   
    <header>  
       <div id="headerBgRight"></div>
    </header>       
    <aside class="left-panel">
       <!-- Left panel listing here -->
    </aside>
    <div class="main-content">
    </div>
</body>

CSS:

html, body {
   height:100%;
}

header {
   position:absolute;
   background-image:image.png
   width:100%
   position:relative;
   height:131px;
}

aside {
   height:100%;
   background-color:rgb(27,135,200);
   position: relative;
   float:left;
   width:100px;
}

main-content {
   position:relative;
}

(Simplified jsfiddle)

The problem that I am experiencing is that the sidebar is 100% height, but because it is set to relative, the sidebar is added to the header of 131px height, thus the page has a height of 100% + 131 px. And that is NOT what I want.

Any way to fix this without creating fixed divs?

Possible duplicate of [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) — Rob, Oct 30 '15 at 15:27
Thank you for your comment. I have searched a lot on Stackoverflow, but they all are different than my example or agree to a solution I am not happy with (compromises responsiveness). The possible duplicate you talk about has NO header and there isn't even any word about relative divs. So no, its not a dublicate. — PIDZB, Oct 30 '15 at 15:31
There are also a multitude of "100% height div with header" questions on SO. — Rob, Oct 30 '15 at 15:33
Then please add that duplicate to the comments here, because I searched and searched and again: they all give solutions that compromise the responsiveness of my website. — PIDZB, Oct 30 '15 at 15:35

score 1 · Answer 1 · answered Oct 30 '15 at 15:00

Try calculating the height of your aside div like so in CSS:

height: calc(100vh - 131px);

Where vh represents the full height of your screen, from which you substract the height of your header, which is 131px. I think that you will get what you want and if you must you can adjust the numbers to get a 100% accurate measurement. Keep in mind adding margin/padding in the future to your header can mess things up. I recommend using Sass/Scss to keep track of your height with a variable like so:

$header-height: 131px;

Then using it on your styling like so:

height: calc(100vh - $header-height);

I hope this helps!

100 % height - relative div with header

1 Answers1