Question

I made a centered page container that has 100% height with a footer inside it. My problem is that when I put in an element that is too tall or text that is too long, they will flow out of the “#page” container and over the footer. Using overflow-y: auto; on “#page” container doesn’t look good. I would prefer the “#page” container to stretch to accommodate longer elements or text but still have the “#page” container’s height to be the same as the browser window height. An aesthetically pleasing solution would be appreciated thanks.

UPDATE:
here is the jsfiddle link http://jsfiddle.net/ueP9q/

Answer 1

HTML

<div id="page">
    <div id="content">
            <div id="header1" class="header"></div>
            <div id="divider" class="header"></div>
            <div id="header2" class="header"></div>
     <p>asdasdadsads</p>
        <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>
    <p>asdasdadsads</p>

    </div>

    <div id="footer">
        </div>
</div>

CSS

*{margin:0px;padding:0px;}
body,html{height:100%;}
body{
text-align: center;  
padding:0px;
margin:0px;
}
#page{
margin: 0 auto;
background:rgba(255,255,255,0.79);
width:950px;
-webkit-box-shadow: inset 1px 1px 150px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 1px 1px 150px 5px rgba(0, 0, 0, 0.2);
box-shadow: inset 1px 1px 150px 5px rgba(0, 0, 0, 0.2);
}
#footer{
border-top:1px solid white;
border-bottom:1px solid white;
width:950px;
height:50px;
overflow:hidden;
background-color:blue;
webkit-box-shadow: 0px 1px 7px 3px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 1px 7px 3px rgba(0, 0, 0, 0.7);
box-shadow: 0px 1px 7px 3px rgba(0, 0, 0, 0.7);
}

//content
.push{height:4em;}
#content{
border:0px solid black;
width:950px;
height: auto;
}
.header{
margin-top:10px;
border:0px solid black;
height:70px;
float:right;
}
#divider{
border-left:1px solid white;
border-right:1px solid #D4D4D4;
}
#header1{width:470px;
}
#header2{width:470px;
}

See this one – http://jsfiddle.net/aniketpant/U5CSv/

Just removed the 2 margins you had put.