css布局：中间固定，两边自适应

实现效果

一、float实现

  
    
    
    
    
    
  
  
    

      
left
      
right
      
middle
    
  

二、flex实现
请移步flex笔记

HTML部分

    
    

    
    

        

        

        
  
    
    
    


CSS部分

 body{
      margin: 0;
      padding: 0;
      font-size: 30px;
    }
 .container {
      width: 100%;
      min-height: 100%px;
      background-color: lightsalmon;
    }
 .header {
      height: 68px;
      width: 100%;
      position: absolute;
      background-color: lightsalmon;
    }
 .content {
      display: flex;
      display: -webkit-flex;
      /*纵向排列*/
      /* flex-direction: column; */
      width: 100%;    
      background-color:lightgreen;
      position: absolute;
      top:68px;
      bottom:68px;
      overflow: auto; /*超出的部分，滚动条显示*/
  } 
 
  .content-left {
      background-color: aquamarine;
      width: 320px;
      /* 不放大 不缩小 固定宽度320px */
      flex: 0 0 320px;
      
      height: 100%;
  }
  .content-middle {
      background-color: yellow;
      height: 100%;
      
      flex: 1 1 auto;
  }
  .content-right {
      background-color: aquamarine;
      width: 320px;
      height: 100%;
      text-align: center;
      /* 不放大 不缩小 固定宽度320px */
      flex: 0 0 320px;
  }
  .footer {
        width: 100%;
        height: 68px;
        position: absolute;
        
        bottom: 0;
        background-color: lightsalmon;
    }

补充知识
flex的属性取值
flex不写时，属性默认是0 1 auto，即
flex-grow为0，存在剩余空间也不放大
flex-shrink为1，空间不足该项目缩小
flex-basis为auto，该项目本来的大小
flex：1 1 1 auto;
flex-grow为1，存在剩余空间时放大
flex-shrink为1，空间不足该项目缩小
flex-basis为auto，自适应剩余的空间
三、absolute实现
左右两边设置absolute，分别设置left为0、right为0，设置宽度，中间部分只需设置左右的margin即可。

  
    
    
    
    
  
  
  
    

      
1
      
2
      
3
    
  

四、grid实现
Grid网格布局实现非常简单，只需几行代码。

  
    
    
    
    
  
  
  
    

      
1
      
2
      
3
    
  

五、table-cell

  
    
    
    
  
  
    

      
left
      
middle
      
right
    
  

总结：
1、float布局使用的时候一定要注意清除浮动。
2、Position布局只是根据定位属性来设置元素位置，不太适合用做页面布局。
3、flex布局虽然很好用，但是还是存在IE上的兼容性问题，只能支持到IE9以上。
4、grid网格布局很强大，但是兼容性很差。
5、table布局使用起来方便，兼容性也不存在问题，但是不利于搜索引擎抓取信息。
如果上面看不懂，可以看下这篇：

image.png

  
  
  




  

    
用flex-grow：（给中间元素设置 flex-grow: 1）
    

      

      

      

    
  
  

    
用flex-shrink：（给中间元素设置flex-shrink: 2，left 和 right 设置 flex-shrink: 0）
    

      

      

      

    
  
  

    
用flex + calc： （width: calc(100% - 200px);）
    

      

      

      

    
  
  

    
用万能定位法
    

      

      

      

    
  
  

    
用float：（*cneter放到最下面）