聖盃佈局進階版-flex佈局實現

勒了個浪發表於2019-04-20
Flex

內部運營平臺常見佈局，要求如下
① 網頁的最小寬度為1200px
② 頂部欄始終處於瀏覽器頂端
③ 內容模組寬度需要自適應，需要自動鋪滿左側欄跟右側欄留下來的空間
④ 內容模組高度需要自適應，需要自動鋪滿頂部欄跟底部欄留下來的空間，當三者高度之和大於瀏覽器高度時，內容模組跟底部欄處出現滾動條，頂部欄固定

原始碼地址：

github.com/ZYuMing/Blo…

效果圖：

①頂部欄+內容模組+底部欄的高度之和小於瀏覽器高度

效果圖

②頂部欄+內容模組+底部欄的高度之和大於瀏覽器高度(注意滾動條出現位置)

效果圖

HTML佈局

<div class="layout">
    <div class="header">這裡是頂部欄</div>
    <div class="main">
        <div class="center">
            <div class="left">這裡是左側欄</div>
            <div class="content">
                <div class="page">
                    內容模組的寬度需要自適應，需要自動鋪滿。當頂部欄高度+內容模組高度+底部欄高度小於瀏覽器高度時，自動鋪滿。當頂部欄高度+內容模組高度+底部欄高度大於瀏覽器高度時，頂部欄一直處於瀏覽器頂端。內容模組跟底部欄處出現滾動條
                </div>
            </div>
            <div class="right">這裡是右側欄</div>
        </div>
        <div class="bottom">這裡是底部欄</div>
    </div>
</div>
複製程式碼

CSS樣式

html, body{
    width: 100%;
    height: 100%;
    min-width: 1200px;
}
.layout{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.header{
    flex: 0 0 70px;
    background: #F39322;
}
.main{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.center{
    flex: 1;
    background: #BCE5E5;
    display: flex;
}
.left{
    flex: 0 0 250px;
    background: #02A899;
}
.content{
    flex: 1;
    background: #FEE064;
    overflow: hidden;
}
.right{
    flex: 0 0 250px;
    background: #02A899;
}
.bottom{
    flex: 0 0 70px;
    background: #C7262F;
}
.page{
    width: 100%;
    height: 850px;
}
複製程式碼

相關文章