html - 长段落流出100%高度的容器

Question

我制作了一个居中的页面容器，它的高度为 100%，里面有一个页脚。我的问题是，当我放入太高的元素或太长的文本时，它们会流出“#page”容器并覆盖页脚。使用溢出-y:自动；在“#page”容器上看起来不太好。我希望“#page”容器可以拉伸(stretch)以容纳更长的元素或文本，但“#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 个边距。