一文详解CSS常见的五大布局

【稿件】

网站建设哪家好，找成都创新互联公司！专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了大荔免费建站欢迎大家使用！

本文概要

本文将介绍如下几种常见的布局：

一、单列布局

常见的单列布局有两种：

  • header,content 和 footer 等宽的单列布局

  • header 与 footer 等宽,content 略窄的单列布局

1.如何实现

对于***种，先通过对 header,content,footer 统一设置 width：1000px;或者 max-width：1000px(这两者的区别是当屏幕小于 1000px 时，前者会出现滚动条，后者则不会，显示出实际宽度);然后设置 margin:auto 实现居中即可得到。
 
    •  
    •  
  • .header{ 
  •   margin:0 auto; 
  •   max-width: 960px; 
  •   height:100px; 
  •   background-color: blue; 
  • } 
  • .content{ 
  •   margin: 0 auto; 
  •   max-width: 960px; 
  •   height: 400px; 
  •   background-color: aquamarine; 
  • } 
  • .footer{ 
  •   margin: 0 auto; 
  •   max-width: 960px; 
  •   height: 100px; 
  •   background-color: aqua; 
  • } 

    • 对于第二种，header、footer 的内容宽度不设置，块级元素充满整个屏幕，但 header、content 和 footer 的内容区设置同一个 width，并通过 margin:auto 实现居中。

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.  
      6.  
 
 

     
 
 
 
        
  
  
  
    1. .header{ 
      2.   
  
  
  
    2.   margin:0 auto; 
      3.   
  
  
  
    3.   max-width: 960px; 
      4.   
  
  
  
    4.   height:100px; 
      5.   
  
  
  
    5.   background-color: blue; 
      6.   
  
  
  
    6. } 
      7.   
  
  
  
    7. .nav{ 
      8.   
  
  
  
    8.   margin: 0 auto; 
      9.   
  
  
  
    9.   max-width: 800px; 
      10.   
  
  
  
    10.   background-color: darkgray; 
      11.   
  
  
  
    11.   height: 50px; 
      12.   
  
  
  
    12. } 
      13.   
  
  
  
    13. .content{ 
      14.   
  
  
  
    14.   margin: 0 auto; 
      15.   
  
  
  
    15.   max-width: 800px; 
      16.   
  
  
  
    16.   height: 400px; 
      17.   
  
  
  
    17.   background-color: aquamarine; 
      18.   
  
  
  
    18. } 
      19.   
  
  
  
    19. .footer{ 
      20.   
  
  
  
    20.   margin: 0 auto; 
      21.   
  
  
  
    21.   max-width: 960px; 
      22.   
  
  
  
    22.   height: 100px; 
      23.   
  
  
  
    23.   background-color: aqua; 
      24.   
  
  
  
    24. } 
      25.

    二、两列自适应布局

    两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

    1.float+overflow:hidden

    如果是普通的两列布局，浮动+普通元素的 margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6-浏览器。具体代码如下：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.       
      left
       
      4.   
  
  
  
    4.    
      5.   
  
  
  
    5.    
      6.   
  
  
  
    6.       
      right
       
      7.   
  
  
  
    7.       
      right
       
      8.   
  
  
  
    8.    
      9.   
  
  
  
    9.  
      10.  
 
 

     
 
 
 
        
  
  
  
    1. .parent { 
      2.   
  
  
  
    2. overflow: hidden; 
      3.   
  
  
  
    3. zoom: 1; 
      4.   
  
  
  
    4. } 
      5.   
  
  
  
    5. .left { 
      6.   
  
  
  
    6. float: left; 
      7.   
  
  
  
    7. margin-right: 20px; 
      8.   
  
  
  
    8. } 
      9.   
  
  
  
    9. .right { 
      10.   
  
  
  
    10. overflow: hidden; 
      11.   
  
  
  
    11. zoom: 1; 
      12.   
  
  
  
    12. } 
      13.

    注意点:如果侧边栏在右边时，注意渲染顺序。即在 HTML 中，先写侧边栏后写主内容

    2.Flexbox 布局

    Flexbox 布局，也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。

     
 
 
 
        
  
  
  
    1. //html部分同上 
      2.   
  
  
  
    2. .parent { 
      3.   
  
  
  
    3. display:flex; 
      4.   
  
  
  
    4. } 
      5.   
  
  
  
    5. .right { 
      6.   
  
  
  
    6. margin-left:20px; 
      7.   
  
  
  
    7. flex:1; 
      8.   
  
  
  
    8. } 
      9.

    3.Grid 布局

    Grid 布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。

     
 
 
 
        
  
  
  
    1. //html部分同上 
      2.   
  
  
  
    2. .parent { 
      3.   
  
  
  
    3. display:grid; 
      4.   
  
  
  
    4. grid-template-columns:auto 1fr; 
      5.   
  
  
  
    5. grid-gap:20px 
      6.   
  
  
  
    6. } 
      7.

    三、三栏布局

    特征：中间列自适应宽度，旁边两侧固定宽度，实现三栏布局有多种方式：

    1.浮动布局

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.    
      5.   
  
  
  
    5.   Layout 
      6.   
  
  
  
    6.    
      7.   
  
  
  
    7.       html * { 
      8.   
  
  
  
    8.           padding: 0; 
      9.   
  
  
  
    9.           margin: 0; 
      10.   
  
  
  
    10.       } 
      11.   
  
  
  
    11.       .layout article div { 
      12.   
  
  
  
    12.           min-height: 150px; 
      13.   
  
  
  
    13.       } 
      14.   
  
  
  
    14.    
      15.   
  
  
  
    15.  
      16.   
  
  
  
    16.  
      17.   
  
  
  
    17.    
      18.   
  
  
  
    18.    
      19.   
  
  
  
    19.        
      20.   
  
  
  
    20.           .layout.float .left { 
      21.   
  
  
  
    21.               float: left; 
      22.   
  
  
  
    22.               width: 300px; 
      23.   
  
  
  
    23.               background: red; 
      24.   
  
  
  
    24.           } 
      25.   
  
  
  
    25.           .layout.float .center { 
      26.   
  
  
  
    26.               background: yellow; 
      27.   
  
  
  
    27.           } 
      28.   
  
  
  
    28.           .layout.float .right { 
      29.   
  
  
  
    29.               float: right; 
      30.   
  
  
  
    30.               width: 300px; 
      31.   
  
  
  
    31.               background: blue; 
      32.   
  
  
  
    32.           } 
      33.   
  
  
  
    33.        
      34.   
  
  
  
    34.       
      三栏布局
       
      35.   
  
  
  
    35.        
      36.   
  
  
  
    36.            
      37.   
  
  
  
    37.            // 右栏部分要写在中间内容之前 
      38.   
  
  
  
    38.            
      39.   
  
  
  
    39.               
      浮动解决方案
       
      40.   
  
  
  
    40.               1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案； 
      41.   
  
  
  
    41.            
      42.   
  
  
  
    42.        
      43.   
  
  
  
    43.    
      44.   
  
  
  
    44.  
      45.   
  
  
  
    45.  
      46.

    这种布局方式，dom 结构必须是先写浮动部分，然后再中间块，否则右浮动块会掉到下一行。 浮动布局的优点就是比较简单，兼容性也比较好。但浮动布局是有局限性的，浮动元素脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。

    2.绝对定位布局  

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3.       
      4.   
  
  
  
    4.      
      三栏布局
       
      5.   
  
  
  
    5.       
      6.   
  
  
  
    6.           
      7.   
  
  
  
    7.           
      8.   
  
  
  
    8.              
      绝对定位解决方案
       
      9.   
  
  
  
    9.              1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案； 
      10.   
  
  
  
    10.           
      11.   
  
  
  
    11.           
      12.   
  
  
  
    12.       
      13.   
  
  
  
    13.   
      14.

    绝对定位布局优点就是快捷，设置很方便，而且也不容易出问题。缺点就是，容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，这就导致了这种方法的有效性和可使用性是比较差的。

    3.flexbox 布局  

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3.       
      4.   
  
  
  
    4.      
      三栏布局
       
      5.   
  
  
  
    5.       
      6.   
  
  
  
    6.           
      7.   
  
  
  
    7.           
      8.   
  
  
  
    8.              
      flexbox解决方案
       
      9.   
  
  
  
    9.              1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案； 
      10.   
  
  
  
    10.           
      11.   
  
  
  
    11.           
      12.   
  
  
  
    12.       
      13.   
  
  
  
    13.   
      14.

    flexbox 布局是 css3 里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较***的一个。目前移动端的布局也都是用 flexbox。 flexbox 的缺点就是 IE10 开始支持，但是 IE10 的是-ms 形式的。

    4.表格布局

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.        
      4.   
  
  
  
    4.       
      三栏布局
       
      5.   
  
  
  
    5.        
      6.   
  
  
  
    6.            
      7.   
  
  
  
    7.            
      8.   
  
  
  
    8.               
      表格布局解决方案
       
      9.   
  
  
  
    9.               1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案； 
      10.   
  
  
  
    10.            
      11.   
  
  
  
    11.            
      12.   
  
  
  
    12.        
      13.   
  
  
  
    13.    
      14.

    表格布局的兼容性很好，在 flex 布局不兼容的时候，可以尝试表格布局。当内容溢出时会自动撑开父元素。

    表格布局也是有缺陷:① 无法设置栏边距；② 对 seo 不友好；③ 当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，然而有时候这并不是我们想要的效果。

    5.网格布局

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.      
      4.   
  
  
  
    4.     
      三栏布局
       
      5.   
  
  
  
    5.      
      6.   
  
  
  
    6.          
      7.   
  
  
  
    7.          
      8.   
  
  
  
    8.             
      网格布局解决方案
       
      9.   
  
  
  
    9.             1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案； 
      10.   
  
  
  
    10.          
      11.   
  
  
  
    11.          
      12.   
  
  
  
    12.      
      13.   
  
  
  
    13.  
      14.

    CSS Grid 是创建网格布局***大和最简单的工具。就像表格一样，网格布局可以让 Web 设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。

    但网格布局的兼容性不好。IE10+上支持，而且也仅支持部分属性。

    6.圣杯布局

    ① 特点

    比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是 dom 结构必须是先写中间列部分，这样实现中间列可以优先加载。

     
 
 
 
        
  
  
  
    1. .container { 
      2.   
  
  
  
    2.   padding-left: 220px;//为左右栏腾出空间 
      3.   
  
  
  
    3.   padding-right: 220px; 
      4.   
  
  
  
    4. } 
      5.   
  
  
  
    5. .left { 
      6.   
  
  
  
    6.   float: left; 
      7.   
  
  
  
    7.   width: 200px; 
      8.   
  
  
  
    8.   height: 400px; 
      9.   
  
  
  
    9.   background: red; 
      10.   
  
  
  
    10.   margin-left: -100%; 
      11.   
  
  
  
    11.   position: relative; 
      12.   
  
  
  
    12.   left: -220px; 
      13.   
  
  
  
    13. } 
      14.   
  
  
  
    14. .center { 
      15.   
  
  
  
    15.   float: left; 
      16.   
  
  
  
    16.   width: 100%; 
      17.   
  
  
  
    17.   height: 500px; 
      18.   
  
  
  
    18.   background: yellow; 
      19.   
  
  
  
    19. } 
      20.   
  
  
  
    20. .right { 
      21.   
  
  
  
    21.   float: left; 
      22.   
  
  
  
    22.   width: 200px; 
      23.   
  
  
  
    23.   height: 400px; 
      24.   
  
  
  
    24.   background: blue; 
      25.   
  
  
  
    25.   margin-left: -200px; 
      26.   
  
  
  
    26.   position: relative; 
      27.   
  
  
  
    27.   right: -220px; 
      28.   
  
  
  
    28. } 
      29.  
 
 

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.     
      圣杯布局
       
      4.   
  
  
  
    4.    
      5.   
  
  
  
    5.    
      6.   
  
  
  
    6.    
      7.   
  
  
  
    7.  
      8.

    ② 实现步骤

    ③ 缺点

    7.双飞翼布局

    ① 特点

    同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是***栏，不会出问题。

     
 
 
 
        
  
  
  
    1. .container { 
      2.   
  
  
  
    2.     min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽 
      3.   
  
  
  
    3. } 
      4.   
  
  
  
    4. .left { 
      5.   
  
  
  
    5.     float: left; 
      6.   
  
  
  
    6.     width: 200px; 
      7.   
  
  
  
    7.     height: 400px; 
      8.   
  
  
  
    8.     background: red; 
      9.   
  
  
  
    9.     margin-left: -100%; 
      10.   
  
  
  
    10. } 
      11.   
  
  
  
    11. .center { 
      12.   
  
  
  
    12.     float: left; 
      13.   
  
  
  
    13.     width: 100%; 
      14.   
  
  
  
    14.     height: 500px; 
      15.   
  
  
  
    15.     background: yellow; 
      16.   
  
  
  
    16. } 
      17.   
  
  
  
    17. .center .inner { 
      18.   
  
  
  
    18.     margin: 0 200px; //新增部分 
      19.   
  
  
  
    19. } 
      20.   
  
  
  
    20. .right { 
      21.   
  
  
  
    21.     float: left; 
      22.   
  
  
  
    22.     width: 200px; 
      23.   
  
  
  
    23.     height: 400px; 
      24.   
  
  
  
    24.     background: blue; 
      25.   
  
  
  
    25.     margin-left: -200px; 
      26.   
  
  
  
    26. } 
      27.   
  
  
  
    27.  
      28.   
  
  
  
    28.      
      29.   
  
  
  
    29.         双飞翼布局 
      30.   
  
  
  
    30.      
      31.   
  
  
  
    31.      
      32.   
  
  
  
    32.      
      33.   
  
  
  
    33.  
      34.

    ② 实现步骤(前两步与圣杯布局一样)

    ③ 缺点

    多加一层 dom 树节点，增加渲染树生成的计算量。

    ④ 圣杯布局和双飞翼布局实现方式对比:

    四、等高列布局

    等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。

    1.利用背景图片

    这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假象。实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现,但此方法不适合流体布局等高列的布局。

    在制作样式之前需要一张类似下面的背景图：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.    
      4.   
  
  
  
    4.    
      5.   
  
  
  
    5.  
      6.  
 
 

     
 
 
 
        
  
  
  
    1. .container { 
      2.   
  
  
  
    2. background: url("column.png") repeat-y; 
      3.   
  
  
  
    3. width: 960px; 
      4.   
  
  
  
    4. margin: 0 auto; 
      5.   
  
  
  
    5. } 
      6.   
  
  
  
    6. .left { 
      7.   
  
  
  
    7. float: left; 
      8.   
  
  
  
    8. width: 220px; 
      9.   
  
  
  
    9. } 
      10.   
  
  
  
    10. .content { 
      11.   
  
  
  
    11. float: left; 
      12.   
  
  
  
    12. width: 480px; 
      13.   
  
  
  
    13. } 
      14.   
  
  
  
    14. .right { 
      15.   
  
  
  
    15. float: left; 
      16.   
  
  
  
    16. width: 220px; 
      17.   
  
  
  
    17. } 
      18.

    2.利用正padding+负margin

    我们通过等布局便可解决圣杯布局的第二点缺点，因为背景是在 padding 区域显示的，设置一个大数值的 padding-bottom，再设置相同数值的负的 margin-bottom，并在所有列外面加上一个容器，并设置 overflow:hidden 把溢出背景切掉。这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器。新增代码如下： 

     
 
 
 
        
  
  
  
    1. .center, 
      2.   
  
  
  
    2.   .left, 
      3.   
  
  
  
    3.   .right { 
      4.   
  
  
  
    4.     padding-bottom: 10000px; 
      5.   
  
  
  
    5.     margin-bottom: -10000px; 
      6.   
  
  
  
    6.   } 
      7.   
  
  
  
    7.   .container { 
      8.   
  
  
  
    8.     padding-left: 220px; 
      9.   
  
  
  
    9.     padding-right: 220px; 
      10.   
  
  
  
    10.     overflow: hidden;//把溢出背景切掉 
      11.   
  
  
  
    11.   } 
      12.

    3.模仿表格布局

    这是一种非常简单，易于实现的方法。不过兼容性不好，在ie6-7无法正常运行。

     
 
 
 
        
  
  
  
    1.   
      2.   
  
  
  
    2.      
      3.   
  
  
  
    3.        
      4.   
  
  
  
    4.          
      5.   
  
  
  
    5.           .... 
      6.   
  
  
  
    6.          
      7.   
  
  
  
    7.        
      8.   
  
  
  
    8.        
      9.   
  
  
  
    9.          
      10.   
  
  
  
    10.           ... 
      11.   
  
  
  
    11.          
      12.   
  
  
  
    12.        
      13.   
  
  
  
    13.        
      14.   
  
  
  
    14.          
      15.   
  
  
  
    15.           ... 
      16.   
  
  
  
    16.          
      17.   
  
  
  
    17.        
      18.   
  
  
  
    18.      
      19.   
  
  
  
    19.    
      20.   
  
  
  
    20. .table { 
      21.   
  
  
  
    21. width: auto; 
      22.   
  
  
  
    22. min-width: 1000px; 
      23.   
  
  
  
    23. margin: 0 auto; 
      24.   
  
  
  
    24. padding: 0; 
      25.   
  
  
  
    25. display: table; 
      26.   
  
  
  
    26. } 
      27.   
  
  
  
    27. .tableRow { 
      28.   
  
  
  
    28. display: table-row; 
      29.   
  
  
  
    29. } 
      30.   
  
  
  
    30. .tableCell { 
      31.   
  
  
  
    31. display: table-cell; 
      32.   
  
  
  
    32. width: 33%; 
      33.   
  
  
  
    33. } 
      34.   
  
  
  
    34. .cell1 { 
      35.   
  
  
  
    35. background: #f00; 
      36.   
  
  
  
    36. height: 800px; 
      37.   
  
  
  
    37. } 
      38.   
  
  
  
    38. .cell2 { 
      39.   
  
  
  
    39. background: #0f0; 
      40.   
  
  
  
    40. } 
      41.   
  
  
  
    41. .cell3 { 
      42.   
  
  
  
    42. background: #00f; 
      43.   
  
  
  
    43. } 
      44.

    4.使用边框和定位

    这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。结构简单，兼容各浏览器，容易掌握。假设你需要实现一个两列等高布局，侧栏高度要和主内容高度相等。

     
 
 
 
        
  
  
  
    1. #wrapper { 
      2.   
  
  
  
    2. width: 960px; 
      3.   
  
  
  
    3. margin: 0 auto; 
      4.   
  
  
  
    4. } 
      5.   
  
  
  
    5. #mainContent { 
      6.   
  
  
  
    6. border-right: 220px solid #dfdfdf; 
      7.   
  
  
  
    7. position: absolute; 
      8.   
  
  
  
    8. width: 740px; 
      9.   
  
  
  
    9. height: 800px;   
      10.   
  
  
  
    10. background: green; 
      11.   
  
  
  
    11. } 
      12.   
  
  
  
    12. #sidebar { 
      13.   
  
  
  
    13. background: #dfdfdf; 
      14.   
  
  
  
    14. margin-left: 740px; 
      15.   
  
  
  
    15. position: absolute; 
      16.   
  
  
  
    16. height: 800px; 
      17.   
  
  
  
    17. width: 220px; 
      18.   
  
  
  
    18. } 
      19.   
  
  
  
    19.  
      20.   
  
  
  
    20.   ... 
      21.   
  
  
  
    21.   ... 
      22.   
  
  
  
    22.  
      23.

    五、粘连布局

    1.特点

    具体代码如下：

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.     
      3.   
  
  
  
    3.      main  
      4.   
  
  
  
    4.      main  
      5.   
  
  
  
    5.      main  
      6.   
  
  
  
    6.     
      7.   
  
  
  
    7.   
      8.   
  
  
  
    8.  footer 
      9.  
 
 

     
 
 
 
        
  
  
  
    1. * { 
      2.   
  
  
  
    2.     margin: 0; 
      3.   
  
  
  
    3.     padding: 0; 
      4.   
  
  
  
    4.   } 
      5.   
  
  
  
    5.   html, 
      6.   
  
  
  
    6.   body { 
      7.   
  
  
  
    7.     height: 100%;//高度一层层继承下来 
      8.   
  
  
  
    8.   } 
      9.   
  
  
  
    9.   #wrap { 
      10.   
  
  
  
    10.     min-height: 100%; 
      11.   
  
  
  
    11.     background: pink; 
      12.   
  
  
  
    12.     text-align: center; 
      13.   
  
  
  
    13.     overflow: hidden; 
      14.   
  
  
  
    14.   } 
      15.   
  
  
  
    15.   #wrap .main { 
      16.   
  
  
  
    16.     padding-bottom: 50px; 
      17.   
  
  
  
    17.   } 
      18.   
  
  
  
    18.   #footer { 
      19.   
  
  
  
    19.     height: 50px; 
      20.   
  
  
  
    20.     line-height: 50px; 
      21.   
  
  
  
    21.     background: deeppink; 
      22.   
  
  
  
    22.     text-align: center; 
      23.   
  
  
  
    23.     margin-top: -50px; 
      24.   
  
  
  
    24.   } 
      25.

    2.实现步骤

    (1)footer 必须是一个独立的结构，与 wrap 没有任何嵌套关系

    (2)wrap 区域的高度通过设置 min-height，变为视口高度

    (3)footer 要使用 margin 为负来确定自己的位置

    (4)在 main 区域需要设置 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。

    参考文章

    作者：浪里行舟，慕课网认证作者，前端爱好者，立志往全栈工程师发展，从事前端一年多，目前技术栈有vue全家桶、ES6以及less等，乐于分享，最近一年写了五六十篇原创技术文章，得到诸多好评！

    【原创稿件，合作站点转载请注明原文作者和出处为.com】

    新闻名称：一文详解CSS常见的五大布局
    当前URL：http://www.shufengxianlan.com/qtweb/news15/20965.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    品牌网站设计知识

    同城分类信息

    绵阳服务器托管　　 　营销型网站建设　　 　微信小程序开发　　 　移动服务器托管　　 　高县网站建设　　 　全网营销　　 　成都高电机柜租用　　 　卖友情链接　　 　做网站价格　　 　益鑫餐饮　　 　成都定制网站建设　　 　成都品牌网站建设　　 　Android开发　　 　装饰公司网站建设方案　　 　中国电信成都枢纽中心　　 　成都网站建设　　 　子晨木包装箱　　 　自动门　　 　成都响应式网站建设　　 　网站seo