网页中 “复杂” 的布局需求实现

作为一名前端“攻城狮”，实现所有需求的页面布局是最基本的技能。下面的内容，给大家介绍一些复杂的布局。

内容提纲

当页面内容不足一屏的高度时，底部内容出现在屏幕底部；当页面内容高度一屏的高度时，内容处于正常的文档流底部；

效果图：

  
  
  
  Document
  
  *{
    margin: 0;
    padding: 0;
  }
  html, body{
    height: 100%;
  }
  body {
    display: table;
    width: 100%;
  }
  .main{
    /*height: 2000px;*/
    background: #000;
    color: #fff;
  }
  .footer{
    background: #f00;
    display: table-footer-group;
  }
  


  
这里是主体区域
  
这里是底部

触屏端页面未知顶部高度，主体容器撑满剩余空间；（现实场景：页面初始化时顶部状态栏是出现的，但是主体容器的内容是需要调接口的，在接口未返回结果前，页面出现loading的动画，且loading在剩余空间内水平、垂直居中）

效果图：

  
  
  
  Document
  
  *{
    margin: 0;
    padding: 0;
  }

  html,body{
    height: 100%;
  }
  .wrap{
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .head{
    background: #000;
    color: #fff;
    text-align: center;
  }
  .loading{
    position: relative;
    background: #f00;
    flex-grow: 1;
  }
  .loading-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
  }

  


  

    

      
head
      
head
    
    

      
loading...
    
  

触屏端未知顶部、底部高度，中间内容自适应；

效果图：

  
  
  
  Document
  
  *{
    margin: 0;
    padding: 0;
  }
  html, body{
    height: 100%;
  }

  .wrap{
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .header{
    background: #000;
    color: #fff;
    text-align: center;
  }
  .main{
    flex-grow: 1;
    background: #f00;
    color: #fff;
  }
  .footer{
    background: #007fff;
    color: #fff;
    text-align: center;
  }
  


  

    

      
header
      
header
    
    
这里是主体区域
    

      
footer
      
footer
    
  

PC端实现上下高度已知切固定在顶部，主体内容高度占满剩余空间；（PC端对于flexbox有兼容性问题）

效果图：

  
  
  
  Document
  
  *{
    margin: 0;
    padding: 0;
  }
  html, body{
    height: 100%;
  }

  .oh{
    overflow: hidden;
  }

  .header{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    line-height: 100px;
    background: #000;
    color: #fff;
    text-align: center;
  }

  .main{
    height: 100%;
    padding: 100px 0;
    background: #f00;
    color: #fff;
  }

  .footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    line-height: 100px;
    background: #007fff;
    color: #fff;
    text-align: center;
  }
  


  

    header
  
  

    这里是主体区域
  
  

    footer
  

左中右布局，左侧、右侧宽度固定，中间宽度自适应；

效果图：

  
  
  
  Document
  
    *{
      margin: 0;
      padding: 0;
    }
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden
    }

    .clearfix {
      *+height: 1%
    }

    .left{
      float: left;
      width: 200px;
      height: 100px;
      background: #000;
      color: #fff;
      margin-left: -100%;
    }

    .right{
      float: left;
      width: 100px;
      height: 100px;
      background: #000;
      color: #fff;
      margin-left: -100px;
    }

    .middle{
      float: left;
      width: 100%;
      background: #f00;
      color: #fff;
    }

    .middle-content{
      margin: 0 100px 0 200px;
    }
  


  

    

      

        middle
      
    
    
left
    
right
  

• 左中右布局，且三列的高度均与根据三列的最大高度保持一致；

效果图：

  
  
  
  Document
  
    *{
      margin: 0;
      padding: 0;
    }
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden
    }

    .clearfix {
      *+height: 1%
    }

    .left{
      float: left;
      width: 200px;
      background: #000;
      color: #fff;
      margin-left: -100%;
    }

    .right{
      float: left;
      width: 100px;
      background: #000;
      color: #fff;
      margin-left: -100px;
    }

    .middle{
      float: left;
      width: 100%;
      background: #f00;
      color: #fff;
    }

    .middle-content{
      margin: 0 100px 0 200px;
    }

    .wrap{
      overflow: hidden;
    }

    .height{
      padding-bottom: 9999px;
      margin-bottom: -9999px;
    }
  


  

    

      

        
middle
        
middle
        
middle
        
middle
        
middle
      
    
    
left
    
right
  

希望这篇文章对您有用（最后附上2篇文章）~

1.常见的两列、三列布局，宽高自适应
2.经典的三列布局——双飞翼布局与圣杯布局