我制作了一个居中的页面容器,该容器的高度为100%,内部有页脚。我的问题是,当我放入太高的元素或太长的文本时,它们会从“ #page”容器中流出,并超出页脚。使用溢出-y:自动;在“ #page”容器上看起来不好。我希望“ #page”容器可以拉伸以容纳更长的元素或文本,但“ #page”容器的高度仍应与浏览器窗口的高度相同。美观的解决方案将不胜感激。

更新:
这是jsfiddle链接http://jsfiddle.net/ueP9q/

最佳答案

的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个边距。

关于html - 长段流出高度为100%的容器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/7329134/

10-11 20:20
查看更多