100% height div and margin with fixed header is actually not 100%

Question

I am developping a web app for cross plateform mobile developpement (Cordova/HTML5/angularJS/CSS3). I tried to have a header with a content scrollable (but no scrollbar over the header with using overflow:hidden (CSS) ).

______________ | HEADER | |--------------| | |#| | |#| | Content |#| | |#| | |#| | |#| |--------------| '#' = scrollbar

so this is working but I can't scroll all the way down because a part of my content div is out of the screen at the bottom. This container div is 100% height (CSS) and margin-top of header height (CSS as well):

here is the:

CODE AND LIVE DEMO

I did a fix with the JS but it's not the best solution to me (especially for mobile performances), CSS only should work ! Thanks in advance

Answer 1

What's Going On

You'd like to have a container that is all of the page minus a set height, (from a header above it).

You can do with with CSS (No JS!) and with full old browser compatibility, just using positioning tricks.

First, set your #globalWrapper to position:relative, to catch anything that is positioned absolutely inside it.

Next, set your .ScrollableWrapper to position:absolute, with top:45px (instead of margin-top:45px, and left, right, and bottom to 0.

Code

#globalWrapper {
    overflow: hidden;
    height: 100%;
    background-color: white;
    position:relative;
}
.ScrollableWrapper {
    top: 45px;
    left:0;
    right:0;
    bottom:0;
    border: 5px solid red;
    position:absolute;
    overflow-y: scroll;
}

Note, .ScrollableWrapper must NOT be set to height:100%.

Working Fiddle