长段流出100％高度的容器

Question

我制作了一个居中的页面容器，其高度为100％，里面有一个页脚。我的问题是，当我放入一个太高的元素或太长的文本时，它们将从“#page”容器和页脚上流出。使用overflow-y：auto;在“#page”容器上看起来不太好。我希望“#page”容器可以伸展以容纳更长的元素或文本，但仍然具有“#page”容器的高度与浏览器窗口高度相同。感谢美学上令人愉悦的解决方案。

更新： 这是jsfiddle链接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;
}

见这一个 - http://jsfiddle.net/aniketpant/U5CSv/

刚刚删除了您放置的2个边距。