内部运营平台常见布局，要求如下

① 网页的最小宽度为1200px

② 顶部栏始终处于浏览器顶端

③ 内容模块宽度需要自适应，需要自动铺满左侧栏跟右侧栏留下来的空间

④ 内容模块高度需要自适应，需要自动铺满顶部栏跟底部栏留下来的空间，当三者高度之和大于浏览器高度时，内容模块跟底部栏处出现滚动条，顶部栏固定

源码地址：

效果图：

①顶部栏+内容模块+底部栏的高度之和小于浏览器高度

②顶部栏+内容模块+底部栏的高度之和大于浏览器高度(注意滚动条出现位置)

HTML布局

    
    
     
      这里是顶部栏
     
    
     
        
      
            
       
        这里是左侧栏
       
            
       
                
        
                             内容模块的宽度需要自适应，需要自动铺满。当顶部栏高度+内容模块高度+底部栏高度小于浏览器高度时，自动铺满。当顶部栏高度+内容模块高度+底部栏高度大于浏览器高度时，顶部栏一直处于浏览器顶端。内容模块跟底部栏处出现滚动条                
        
            
       
            
       
        这里是右侧栏
       
        
      
        
      
       这里是底部栏
      
    
     
    
复制代码

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;}复制代码