footer div under another div with height:100% and scroll, with CSS - css

Question

i have some div with height:100%, that have within this 3 divs: header, main, footer.
( here you can see an exemple: http://i61.tinypic.com/28mjpya.jpg )
in the 'main' div, i have a scroll, and i need this to be with height:100%
but when i do height:100% to the 'main' div, i cant see the 'footer' div.
and if i will do the 'footer' div with position:absulute; bottom:0px; it will hide my scroll bar of the 'main' div.
how can i solve this problem?
this is my source: http://jsfiddle.net/8YEJY/
<div style='position:fixed; left:0px; width:200px; height:100%;'>
<div id='hearer' style='width:100%; height:40px; background-color:lime;'>
aaa
</div>
<div id='main' style='width:100%; height:100%; overflow:scroll; background-color:green;'>
bbb
</div>
<div id='footer' style='width:100%; height:30px; background-color:pink;'>
ccc
</div>
</div>

Answer 1

Instead of making the content div scroll you could place your header and footer fixed an let the body scroll:
HTML:
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%; /* needs to be set */
}
#header, #footer {
width: 100%;
height: 100px; /* needs to be a fixed width! */
position: fixed;
top 0;
background: lightgreen;
}
#footer {
bottom: 0;
}
#content {
width: 100%;
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
box-sizing: border-box; /* include the padding in the height */
-moz-box-sizing: border-box;
background: lightblue;
}
And a demo.
[EDIT based on your comment]
Change #content to:
#content {
width: 100%;
position: fixed;
top: 100px;
bottom: 100px;
overflow: auto;
background: lightblue;
}
Check the updated demo.
Note: instead of fixed positioning, you could also place #header, #content and #footer absolute, check this link. Result is the same though.

Answer 2

You can use position:absolute; on the #main and #footer like this :
FIDDLE
What I did to your code :
removed the inline styles and put them in a sperate stylesheet. This makes the code cleaner and inline styles are not recommended.
removed position:fixed; on the first container, it isn't needed for your layout.
removed unecessary css properties
changed the tags to HTML 5 tags
set html,body{height:100%;margin:0;} so the #wrap container can expand to the height of the window with height:100%; and position:relative;.
HTML :
<div id="wrap">
<header>aaa</header>
<main>bbb</main>
<footer>ccc</footer>
</div>
CSS :
html,body{
height:100%;
margin:0;
}
#wrap {
width:200px;
height:100%;
position:relative;
}
#header {
height:40px;
background-color:lime;
}
#main {
position:absolute;
width:100%;
top:40px;
bottom:30px;
overflow:scroll;
background-color:green;
}
#footer {
position:absolute;
width:100%;
bottom:0;
height:30px;
background-color:pink;
}

Answer 3

just add position:absolute and some bottom margin,I have added as bottom:0%;
This one works fine
<div style='position:fixed; left:0px; width:200px; height:100%;'>
<div id='hearer' style='width:100%; height:40px; background-color:lime;'>
aaa
</div>
<div id='main' style='width:100%; height:100%; overflow:scroll; background-color:green;'>
bbb
</div>
<div id='footer' style='width:100%; height:30px; background-color:pink;position:absolute;bottom:1%;'>
ccc
</div>
</div>