作為一個Web的前端攻城師,在制作頁面效果時肯定有碰到下面這種現象:當一個HTML頁面中含有較少的內容時,Web頁面的“footer”部分隨著飄上來,處在頁面的半腰中間,給視覺效果帶來極大的影響,讓你的頁面看上去很不好看,特別是現在寬屏越來越多,這種現象更是常見。那么如何將Web頁面的“footer”部分永遠固定在頁面的底部呢?注意了這里所說的是頁腳footer永遠固定在頁面的底部,而不是永遠固定在顯示器屏幕的底部,換句話說,就是當內容只有一點點時,Web頁面顯示在瀏覽器底部,當內容高度超過瀏覽器高度時,Web頁面的footer部分在頁面的底部,總而言之Web頁面的footer部分永遠在頁面的底部,換句說,Footer部分永遠沉底。如下圖所示:
那么今天主要和大家一起學習如何將頁腳固定在頁面的底部?
方法一
首先我們來看第一種方法,這種方法是來自于Matthew James Taylor的《How to keep footers at the bottom of the page》。下面我們就一起來看看Matthew James Taylor介紹的方法。
HTML Markup
新聞熱點
疑難解答