footer 的實現方法

當內容不超過一屏時，footer在屏幕底部，內容超過一屏時，和主體內容有固定距離。也就是內容少的時候吸底，內容多的時候文檔流排版。我嘗試了幾種實現方法。

1.flex

• 思路：給body設置flex，然後flex的方向設置column，主體內容flex:1於是會自適應高度。

<div class="content">...</div>
<div class="footer">footer</div>

body {
      display: flex;
      -webkit-box-orient: vertical;
      flex-direction: column;
}
.content {
      margin-bottom: 20px;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
}
.footer {
      height: 100px;
}    

2.主體設置margin-bottom爲負數

<div class="content">
...
<div class="flag"></div>
</div>
<div class="footer">footer</div>

html,body{
	height:100%
}
.content{
	min-height: 100%;
    margin-bottom: -50px;
}
.footer,.flag{
	height:50px
}