Question

如何在普通的Flexbox模型中将红色的#body变为100％高度，这适用于Opera，Opera是否拥有自己的Flexbox模型？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    html, body
    {
        height:100%; margin:0px
    }
    body
    {
        display:table; width:100%; height:100%

    }
    body > section
    {
        display:table-row; background-color:#00ff21;
    }
    body > section > #body
    {
        height:100%; background-color:#f00; 
        display:-webkit-box;
        -webkit-box-orient:horizontal;
        -webkit-box-align:stretch; 

        display:flexbox;
        flex-flow:row;
        flex-align:stretch;

    }
    header
    {
        display:table-row; height: 130px; background-color:#ffd800
    }
    footer
    {
        display:table-row;
        height: 160px;
        background-color: #b6ff00;
    }
    body > section > #body > nav
    {
        margin:0px; background-color:#0ff; -webkit-box-flex:1;
    }
    body > section > #body > article
    {
        background-color:#370fff; -webkit-box-flex:9;
    }
    body > section > #body > aside
    {
        background-color:#de09ff; -webkit-box-flex:3
    }
</style>
    <title></title>
</head>
<body>
    <header>
        <p>Header</p>
    </header>
    <section>
        <div id="body">
            <nav>
                Left Sidebar
            </nav>
            <article>
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
            </article>
            <aside>
                <p>Right Side Bar</p>
            </aside>
         </div>
    </section>    

    <footer>
        <p>Footer</p>
    </footer>

</body>
</html>

flexbox伸缩不能在Opera中工作

0 个答案: