1.閑聊時(shí)間
在我接觸書本這小節(jié)內(nèi)容之前，剛做了一個(gè)微信的移動(dòng)端頁面，我遇到了這個(gè)問題。我是怎么解決的呢？當(dāng)然是萬能的JS了。

我的思路是獲取body的大小，如果body大小 小于 窗口大小，那么就把body大小設(shè)置成窗口大小，否則什么也不干。
看了作者的解決方法之后，瞬間感覺自己太low了，恨不得馬上回去修改以前的代碼

2.我們先來看看需要用到的情況
這里圖片中我的頁面有滾動(dòng)條是因?yàn)閎ody有默認(rèn)的margin，請(qǐng)忽略

頁尾沒有在瀏覽器底部

我們往往希望它是這樣的！

頁尾固定

小測(cè)試

html

<header>   
  <h1>Site Name</h1>
</header>
<main>  
  <p>Bacon Ipsum dolor sit amet</p>
</main>
<footer> 
  <p>? 2016 no rights reserved</p>    
  <p>Made with by an anonymous pastafarian.</p>
</footer>

css
首先我們?cè)O(shè)置一些基本樣式

header{    
  width: 100%;  
  text-align: center;
}
main{    
  width: 100%;  
  text-align: center;
}
footer{  
  width: 100%;  
  text-align: center;
  background: burlywood;
}

現(xiàn)在的樣子：

下一步：
我們將body設(shè)置為流布局

body{
  display: flex;
}

我們?cè)僭O(shè)置屬性

body{
  display: flex;
  flex-direction: column;
}

下一步（關(guān)鍵的一步）
設(shè)置body

body{   
 display: flex;
 flex-direction: column; 
 min-height: 100vh;
}

main{
  flex: 1;
}

這樣我們就實(shí)現(xiàn)了固定頁尾的效果

固定頁尾