Designing 3 row html layout

Problem

I am trying to design a layout where i will have header 100px at the top. footer 80px always stick to the bottom of browser screen and an scrollable content area in between header and footer. the vertical scrollbar should come in the content area when i finished writing till the content touches the top end of footer.

Can Anyone suggest me how can i achieve this

Here is what i have tried: JsFiddle

<header>
</header>
<div id="main">
<div id="content">
scrollable content area
</div>
<footer>
footer always appearing bottom of the browser screen
</footer>
</div>

My css:

header {
height: 100px;
width: 100%;
background: #bbb;
}
#main {
background: #ccc;
width: 100%;
    height: 100%
}
#content {
position: relative;
height: 100%;
width: 100%;
background: green;
    overflow-y: auto;
}
footer {
position: relative;
bottom: 0;
height: 80px;
width: 100%;
background: #aaa;
}
Problem courtesy of: user2847429

Solution

EDITED: FIDDLE

#content {
position: absolute;
height: calc(100% - 180px);
background: green;
overflow-x: hidden;
overflow-y:scroll;
}
Solution courtesy of: vishalkin

Discussion

I answered a similar question before at: Div height percentage based but still scrolling

Here is one approach.

The HTML:

<header>The Header...</header>
<div id="main">
    <div id="content">
        scrollable content area
        <p>Lorem ipsum dolor sit amet, ...</p>
    </div>
</div>
<footer>footer always appearing bottom of the browser screen</footer>

The CSS:

html, body {
    height: 100%;
}
body { 
    margin: 0;
}
header {
    height: 100px;
    width: 100%;
    background: #bbb;
    position: absolute;
    top: 0;
}
#main {
    background: #ccc;
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 80px;
    left: 0;
    right: 0;
    overflow-y: auto;
}
#content {
    overflow: auto;
    background: green;
}
footer {
    position: absolute;
    bottom: 0;
    height: 80px;
    width: 100%;
    background: #aaa;
}

The trick is to create an absolutely positioned block container that spans the area between the header and the footer, #main, using the top, bottom, left, right offsets, and apply overflow-y: auto.

The #content will then take up space and eventually trigger the scroll bar on #main.

See demo at: http://jsfiddle.net/audetwebdesign/aNRE9/

Discussion courtesy of: Marc Audet

You will need to use JavaScript for this unfortunately. No big deal. I've also added the handler for when you resize the window.

var resizeTimer;
window.onload = function(){
    makeMiddleFull();
}

window.onresize = function(){
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(makeMiddleFull, 100);
}
function makeMiddleFull(){
    var cobj = document.getElementById('content');
    cobj.style.height = (getDocHeight() - (document.getElementById('header').style.height + document.getElementById('footer').style.height)) + "px";
}
function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

See updated fiddle for full code updates including DOM and CSS here: http://jsfiddle.net/Qpc2s/2/

Discussion courtesy of: John Gerdsen

Just tell me what you have tried? I don't see any header, any footer, just a text there in the scollable div.

Ok let me guide you a bit.

What you do is simple but would require you to understand the point.

How to make the footer stick to the bottom.

footer {
 position: absolute; // position as absolute..
 bottom: 0; // margin-bottom as 0 
 max-width: 80px; // width
 margin: 0 auto; // margin..
}

This will make the footer to always stay at the end of the document I mean at the bottom of the page.

How to make header

header {
 position: absolute;
 top: 0;
 max-width: 100px;
 margin: 0 auto;
}

How to make a scrollable div

I donot fully understand this one. So I am just going to guide you a bit.

You can create a scrollbar in the content div. You want this:

the vertical scrollbar should come in the content area

You can do that by using this:

div {
 max-height: 100px;
 min-height: 100px;
}

I will assume that you are going to change the div to the element or class or id to the one you're having.

Making a scrollable div with a scrollbar.

First you will create a div with a max-height, to make the div not exceed the height of the screen. Then you can use a scrollbar like this:

overflow: scroll; 

Add this property to the element. This way, you'll have a footer, an header, and a content block which has a scrollbar for it self, not the one that browser has.

Fiddle for this:

http://jsfiddle.net/afzaal_ahmad_zeeshan/aNRE9/2/

I am really sorry but I didn't bother changing the background, but you can see, the header stays there, footer at the end, and the div scrolls! :)

Good luck!

Discussion courtesy of: Afzaal Ahmad Zeeshan

This recipe can be found in it's original form on Stack Over Flow.