前端布局之——粘连布局+自适应布局

前段时间修复了一个bug，筛选试错了好多种方式，最终用到粘连布局解决了问题。查询资料时发现，网上关于几种布局的实现方式比较杂乱，故将前端常用的几种布局方式整理一下，以备后续参考使用。

1. 粘连布局

粘连布局是指，当页面的main元素内容较长时（超出屏幕高度），footer紧跟在内容后面；当页面的main元素内容较短时，footer能够粘连在屏幕底部。

HTML部分：

<div id="wrap">
    <div class="main">
      <div>mian</div>
    </div>
</div>
<div id="footer">footer</div>

CSS部分：

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

需要注意的是，footer必须是一个独立的结构，与wrap没有任何嵌套关系