实现两边定宽，中间自适应

标签（空格分隔）： css

---

圣杯布局和双飞翼布局、flex布局

定义

圣杯布局（双飞翼布局）：两边定宽，中间宽度自适应；且优先渲染中间主题内容部分

区别：圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

1、圣杯布局

DOM结构：
由于需要优先渲染主题内容部分，因此在DOM结构中需要将其写在左右侧边栏之前。

 
    
header
    

      
middle
      
left
      
right
    
    
footer

    

CSS:

全部代码:

    
    



   

        
middle
        
left
        
right
    

2、双飞翼布局

DOM结构

header
 
  

    
middle
  
  
left
  
right
  
footer

双飞翼布局是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。

CSS

全部代码

    
    


header
 
  

    
middle
  
  
left
  
right
  
footer

3、弹性盒模型法

整个页面布局由两个弹性盒模型构成：

1. body作为盒子，header、main、footer按垂直方向排列，上下设置定高之后中间设置flex=1自动填满剩余高度。
2. main作为盒子，left、middle、right按水平方向排列（默认），左右设置定宽后中间设置flex=1自动填满剩余宽度。
3. 设置order=-1将左侧边栏拉到主体内容之前。

    
    



    

        
middle
        
left
        
right