在做項目時，想要達到頁腳固定在頁面底部顯示，也就是當頁面主體高度在瀏覽器高度范圍內時頁腳靠瀏覽器底部，超出瀏覽器高度時頁腳在頁面主體下方，相當於在高度上的自適應。
乍看似乎很簡單，固定在底部，用fixed定位就好啦，但是頁面一屏顯示不下時，頁腳會遮擋頁面內容。看到公司很多之前的頁面，大屏幕下頁腳都是懸空顯示的，也是醉了，可能是之前屏幕分辨率較小，頁腳就處於正常的文檔流中，加個上邊距。
現在常用這種方法：
html文檔結構如下：
<body> <wrap> <header></header> <main></main> </wrap> <footer></footer> </body>
將頁頭和頁面主體內容放到同一個容器中，頁腳單獨，之后設置樣式
html,body { margin:0; padding:0; height:100%; } .wrap { min-height: 100%; height: auto !important; } .main { padding-bottom: 80px; //頁腳高度+頁腳與容器的距離 } .footer { height: 60px; //頁腳高度 margin-top: -60px; //一個頁腳高度的負外邊距 }
原理是這樣的：
首先無論頁面內容有多少，設置它占有的高度都至少是100%(min-height:100%),然后設置頁面的高度根據容器內容的高度自適應，下面要考慮頁腳的位置，設置一個負的外邊距使頁腳在高度100%范圍內顯示，這樣帶來的問題是與wrap得部門內容重合，於是設置main的padding-bottom使部分內容空出來，這個padding-bottom值的高度就是用來容納頁腳的。
這樣就實現了想要的效果，當然方法不止一種