圣杯布局进阶版-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;
}