Question

我一直在尝试创建一个带有页眉的页面，页面中间有内容，但是当我在页面中放入大量内容时 - 内容溢出到页脚和页面中断我尝试使用-webkit -flex-flow：row wrap或nowrap，如果我把它转换成一行，它根本不起作用。所以基本上我需要一个页面，它有一个粘性页脚，内容主体扩展到页脚，但如果内容大于页面，页面不应该破坏。有人可以让我在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>

Answer 1

我希望这就是你想要的

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;
}

webkit chrome中的flexbox示例

1 个答案:

fiddle