CSS, Stretching vertically div until it reach the height of its parent [duplicate]

Wrapped in a pageWrapper container, I have 3 divs in a column. First (header) and last (navWrapper) have fixed heights. I need the middle one (contentWrapper) to stretch in height until the parent div pageWrapper reaches the maximum height (according to the browser's viewport).

I draw the schema of this problem.

Here is a fiddle of my current solution.

and here the code

CSS and HTML

html, body{ height: 100%; } body{ background-color: #E3E3E3; } #pageWrapper{ margin: 0 auto; position: relative; width: 600px; height: 100%; } header{ display:block; width: 100%; height: 100px; background: yellow; } #contentWrapper{ width: 100%; height: 100%; background: blue; } #navWrapper{ width: 100%; height: 100px; background: green; }

<div> <header> Header </header> <div> Content </div> <div> Nav </div> </div>

It is almost working, but it results in too high height, which causes that a vertical scrollbar appears.

2 Answers

Here is one way of doing it.

Apply the following CSS:

html, body{ height: 100%; margin: 0;} body{ background-color: #e3e3e3;} #pagewrapper{ margin: 0 auto; position: relative; width: 600px; height: 100%; } header{ display:block; width: 100%; height: 100px; background: yellow; } #contentwrapper{ width: 100%; position: absolute; top: 100px; bottom: 100px; left: 0; background: blue; } #navwrapper{ width: 100%; position: absolute; height: 100px; bottom: 0px; left: 0; background: green; } 

Since you specified heights for the header and #navwrapper block elements, you can use absolute positioning with respect to the parent #pagewrapper block to set the bottom and top offsets for #contentwrapper and the bottom offset for #navwrapper.

If you see a scroll bar, you may need to set margin: 0 for either the html and/or body tags.

Demo fiddle:

You can try adding this script in your section after your CSS is called. It will find the heights of your head/foot elements and make the height in the center div fill the screen. This is good because if you decide to make your header/footer elements heights dynamic this script will still work.

<script src=""></script> <script type="text/javascript"> $(document).ready(function(){ var totalHeight = $('#pageWrapper').height(); totalHeight -= $('header').height(); totalHeight -= $('#navWrapper').height(); // Remove an extra 20px for good measure totalHeight -= 10; $('#contentWrapper').css('height', 'auto'); $('#contentWrapper').css('min-height', totalHeight); }); </script>