Php 需要webkit chrome中的flexbox示例 我一直试图创建一个带有页眉页眉的布局，但在页面中放置了大量内容——内容溢出到页脚和页面中断时，我尝试使用WebKIT Flex流：行包装或NoRAP，如果将其转换为行，则根本不起作用。所以基本上我需要一个有粘性页脚的页面，它的内容主体扩展到页脚，但是如果内容比页面大，页面就不应该断开。有没有人能按照我为chrome所做的解释，在flexbox模型中为我做一页？非常感谢

这是我的密码： CSS:

HTML:

标题
身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

身体

页脚

我希望这就是你想要的

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

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

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