在做頁面之前，個人覺得自己的布局css理論知識還是很堅實的。但是...，實際操作后確實有了一番思考。廢話不說，直接進入正題。

效果：

QQ圖片20160702193418.png

代碼鏈接

總結

只有存在文檔流的內容才能進行滾動，原理是將頭部、內容區(qū)域、以及尾部進行絕對定位，關鍵是將內容區(qū)域在絕對定位的同時，從top到left四個值都定死，才能保證在滾動過程中不會隨著文檔流滾動。

小編文筆不行，有什么講的不對的地方請予以改正。