100% in height layout without any scroll bars

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I want a 100% in height layout without any scroll bars. Only centered
content must have scroll bars. So when browser shrinks, layout must be
squeezed as well and centered content box would change scroll area
only. I achieved this by setting html,body to height: 100%; overflow:
hidden; but when I add header, footer (both fixed) and content between
them (the one that must have scroll bars) it doe snot work fine for me
and goes under footer.
Any help?
Thank you all for trying.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org /

    <style type="text/css">
/*** start layout.css ***/
    margin: 0;
html, body{
    height: 100%;
    overflow: hidden;/*no scrollbars*/
    margin:0 auto -100px;

/*** end layout.css ***/



        <div id="container" style="background-color:#ccc;">

            <div id="header" style="background-color:#333;">    Header</div>

            <div id="content" style="background-color:#dadada;">

        <div id="footer" style="background-color:yellow;">Footer</div>


Re: 100% in height layout without any scroll bars

In article
Quoted text here. Click to load it

Try replacing this with:

#content {
position: absolute;
top: 100px;
bottom: 100px;
overflow: auto;


Site Timeline