1. 程式人生 > >內容不足一屏時的footer固定底部

內容不足一屏時的footer固定底部

在網頁開發中經常遇到內容不足一螢幕時,footer顯示的問題。通常footer是需要公用的,所以在一些內容較少的頁面就會出現footer下面留空白。以下是幾種常見的解決辦法:1. css解決辦法。這種是通過負值外補丁來實現的。   html, body { height: 100%;}   #wrapper { min-height: 100%;}   /*#wrapper 是除footer外的所有內容的容器*/   * html #wrapper { height: 100%;}/*相容IE*/2.JS解決辦法。
   --計算當前視窗的高度,計算固定區域的高度(比如header 和 footer),給內容區域設定最小高度為視窗高度減去固定區域高度。
   --
計算當前視窗的高度計算當前文件的高度,然後判斷如果前者大於等於後者,給footer新增fixed。