2019-04-25 圣杯布局、双飞翼布局和粘连布局

圣杯布局

圣杯布局：
1.两边固定，中间自适应
2.当中列要完整显示
3.当中列要优先加载

HTML
        
header
        

            
middle
            
left
            
right
        
        
footer

css
            *{
                 margin:0;
                 padding:0
             }
             div{
                 height:100px;
             }
             #header, #footer{
                 height:20px;text-align:center;
                 background:pink;
                 border: 1px solid #red
             }
             #content{
                 overflow:hidden;
                 padding:0 200px;
             }
              #content .middle, #content .left, #content .right{
                  padding-bottom:10000px;
                  margin-bottom:-10000px
              }
             #content .middle{
                 background:red;
                 width:100%;
                 float:left;
                 
             }
              #content .left{
                  position:relative;
                  float:left;
                  left:-200px;
                  width:200px;               
                  background:yellowgreen;
                  margin-left:-100%;
             }
              #content .right{
                  position:relative;
                  right:-200px;
                  margin-left:-200px;
                  float:left;
                   width:200px;
                 background:greenyellow;
             }
             .clearfix{
                 *zoom:1;
             }
             .clearfix:after{
                 display:table;
                 content:"";
                 clear:both;
             }

结果如下：

ZLY~1@)DF}4VTOL${C1F)OP.png

双飞翼布局

HTML
        

            
header
        
        

            

                
middle
            
            
left
            
right
        
        

            
footer
        

CSS
             *{
                 margin:0;
                 padding:0
             }
             #header,#footer{
                 border:1px solid;
                 text-align:center;
                 background:pink;
             }
             /* 三列的伪等高布局*/
             #content .middle, #content .left, #content .right{
                 padding-bottom:1000px;
                 margin-bottom:-1000px;
                 height:50px;
                 line-height:50px;
                 float:left;
             }
            #content .middle{
                background:yellow
            }
            /* 双飞翼布局 */
            #content{
                overflow:hidden;
            }
            #content .middle{
                background:yellow;
                width:100%;
            }
            #content .left,#content .right{
                background:#bfa;
                width:200px;
            }
            #content .left{
                margin-left:-100%;
                
            }
            #content .right{
                margin-left:-200px;
            }
            .middle_inner{padding:0 200px}
            
            /* 清除浮动 */
             .clearfix{
                 *zoom:1;
             }
             .clearfix:after{
                 display:table;
                 content:"";
                 clear:both;
             }

结果如下：

KHAOU(3NG(I5)[email protected]

粘连布局

当main内容少时，footer固定在底部;main内容超出时，footer随页面滚动。

HTML
        

            

                main 

                main

                main

                main 

                main

                main

            
  
        
        

            footer
        

CSS
             *{
                 margin:0;
                 padding:0
             }
             html,body{
                 height:100%
             }
            #wrap{
                min-height:100%;
                background:pink;
            }
            .main{
                padding-bottom:50px;
            }
            #footer{
                margin-top:-50px;
                height:50px;
                line-height:50px;
                text-align:center;
                background:deeppink
            }

结果如下：

image.png

image.png