隨筆記錄32 圣杯布局（flex）

圣杯布局要求

header和footer各自占領(lǐng)屏幕所有寬度，高度固定。
中間的container是一個(gè)三欄布局。
三欄布局兩側(cè)寬度固定不變，中間部分自動(dòng)填充整個(gè)區(qū)域。
中間部分的高度是三欄中最高的區(qū)域的高度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            header,footer{
                background:#aa0;
                height:100px;
            }
            .main{
                background:#ccc;
                display: flex;
            }
            .main div{
                flex: 0 0 20%;
            }
            .main .left,.main .right{
                height:200px;
            }
            .main .middle{
                flex: 1;
                min-height:300px;
            }
        </style>
    </head>
    <body>
        <header>header</header>
        <div class="main">
            <div class="left" style="background:#a00;"></div>
            <div class="middle" style="background:#0a0;">
                <div style="height:400px;background:#f00;"></div>
            </div>
            <div class="right" style="background:#00a;"></div>
        </div>
        <footer>footer</footer>
        
        
        
        
    </body>
</html>
image.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容