0

我一直在尝试创建一个带有页眉和中间内容的页脚的布局，但是当我在页面中放置大量内容时 - 内容溢出到页脚和分页符我尝试使用 -webkit-flex- flow: row wrap 或 nowrap 如果我将它转换为一行，它根本不起作用。所以基本上我需要一个具有粘性页脚的页面，其内容主体扩展到页脚，但如果内容大于页面，则页面不应中断。有人可以按照我为 chrome 解释的方式在 flexbox 模型中创建一个页面，非常感谢谢谢

这是我的代码：CSS：

html, body
{
    margin:0px; 
    height:100%; 
    display:-webkit-box; 
    -webkit-box-orient:horizontal; 
    -webkit-flex:1; 
    -webkit-box-flex:1;
}
#wrapper
{
    display:-webkit-box; 
    display:flexbox; 
    -webkit-box-orient:vertical; 
    -webkit-box-flex:1; 
    -webkit-flex-flow:column nowrap; 
    background-color:#f00; 
    height:100% 
}
#body
{
    display:-webkit-box; 
    -webkit-box-orient:vertical; 
    background-color:#ff6a00; 
    flex:1; 
    -webkit-box-flex:1;
}
header
{
    background-color:#4cff00; 
    height:200px
}
footer
{
    background-color:#4cff00; 
    height:200px;
}

HTML：

    <div id="wrapper">
    <header>Header</header>
    <div id="body">
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
        <p>Body</p>
    </div>
    <footer>Footer</footer>
</div>
4

1 回答 1

0

我希望这是你想要的

html, body
{
    margin:0px; 
    height:100%; 
}
#wrapper
{
    display:-webkit-box; 
    display:flexbox; 
    -webkit-box-orient:vertical; 
    -webkit-box-flex:1; 
    -webkit-flex-flow:column nowrap; 
    background-color:#f00; 
    height:100% ; 

}
#body
{
    display:-webkit-box; 
    -webkit-box-orient:vertical; 
    background-color:#ff6a00; 
    flex:1; 
    -webkit-box-flex:1; 
    overflow: hidden;
}
header
{
    background-color:#4cff00; 
    height:200px
}
footer
{
    background-color:#4cff00; 
    height:200px;
}

小提琴

于 2013-09-11T08:25:34.383 回答