CSS/HTML - Make fixed div take 20% of screen and the other be scrollable

Question

I'm trying to build a layout that has a fixed DIV on the bottom of the screen the other DIV and its the content should be scrollable.

I want the first DIV to be dynamic, meaning that the children items displayed inside can grow in height and they should be visible in 80% of height of the screen.

the other DIV should be fixed and always be 20% of the height on the screen (window).

The fixed DIV is pretty straightforward to be implemented with position:fixed but the mainContent DIV is getting overlapped by the bottom DIV. So for that I added padding-bottom to the body.

What I'm trying to achieve is that min-height/height of the upper (mainContent) div should always be till the top of the bottom DIV.

I added my code here http://jsfiddle.net/hp2b64ot/3/ .

Answer 1

Depending on your support, you can us vh units, which means:

body {padding-bottom: 20vh;}

.fixed {height: 20vh}

http://jsfiddle.net/hp2b64ot/12/

Answer 2

This is explanation http://www.w3.org/TR/CSS2/box.html#padding-properties

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

So your padding 20% of body element depends on body width.

Use helper element to solve this problem, for example

<div class="col-md-12 bannerEdge-fix"></div>  

http://jsfiddle.net/hp2b64ot/13/