div上固定，下自适应；div左固定，右自适应

一，上固定，下自适应

1，代码

  
111
  
222

2，图例

image.png

二，下固定，上自适应

1，代码

  
111
  
222

2，图例

image.png

三，上下固定，中间自适应

1，代码

  
111
  
222
  
333

2，图例

image.png

四，左固定，右自适应

1，代码

1.1，float布局

  
111
  
222

1.2，flex布局

  
111
  
222

1.3，table布局

  
111
  
222

1.4，calc布局

  
111
  
222

1.5，margin-left布局

  
111
  
222

2，图例

image.png

五，综合

1，仿网站布局1

先左固定，右自适应；再上下固定，中自适应

    
111
    

        
222
        
333
        
444
    

image.png

2，仿网站布局2

先上固定，下自适应；再左固定，右自适应

    
111
    

        
222
        
333
    
    
444

如图所示

image.png

3，仿XShell页面布局

先上固定，下自适应；再左固定，右自适应；最后左上自适应，左下固定

    
111
    

        

            
222
            
333
        
        
444
    
    
555

image.png