資訊專欄INFORMATION COLUMN
摘要：沉底效果重點代碼總結以上三種方法都屬于沒什么副作用的，其實實現這種沉底效果還有別的實現方式，但是對其他布局有影響，這里不贅述，之后有了更好的解決方案，再來更新。
問題背景
很多網站設計一般是兩個部分，content + footer，content里面裝的是網站主體內容，footer里面展示網站的注冊信息等等，因為網站內容高度不定的原因，會出現下面兩種情況：
1.內容較少時，這個footer固定在在頁面的底部。如下所示：
2.內容較長時，footer跟在內容后面滑動，大致表現如下圖紅色框起來的部分（對應網址：http://www.sbc-mcc.com/）：
這個需求在PC端還是很常見的，我在自己的應用中也遇到了這個問題，今天總結了一下實現這種布局的幾個方法。
方法1 使用js計算為什么第一個就采用js控制的呢，因為實不相瞞，當初我第一次遇到這個問題的時候，直接就使用js去解決的（主要是我知道js肯定能實現的，所以也就沒有花時間去想別的方法）
主要思路是：在頁面加載完成后計算屏幕高度 - content內容真實的高度的值，如果差值大于
footer的高度，就給footer的style加上fixed定位，使它固定在屏幕底部。
demo代碼如下：
footer沉底效果
content
本著能使用css解決就絕對不使用js的原則，這個方法雖然最容易想到，但是還是不推薦使用，而且，這段css代碼要獲取clientHeight，將會導致頁面頁面重排和重繪，性能考慮上來說，也不推薦。
方法2 采用flex布局 + min-heightflex布局中的justify-content: space-between;搭配超級好用的min-height，剛好可以滿足在content內容不足的時候，footer的沉底效果
demo代碼如下：
footer沉底效果
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
min-height實在是超級好用的一個css屬性了，搭配flex輕松實現沉底效果。
方法3 巧用flex + margin-top這個技巧是在講margin auto的妙用中學到的，在flex格式化上下文中，margin auto會自動去分配剩余空間。這里面我們可以在footer上使用margin-top:auto來達到沉底效果。
footer沉底效果
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
總結：以上三種方法都屬于沒什么副作用的，其實實現這種沉底效果還有別的實現方式，但是對其他布局有影響，這里不贅述，之后有了更好的解決方案，再來更新。
PS：之前margin auto沒有深入了解過，了解之后發現還是很神奇的，推薦右邊文章探秘 flex 上下文中神奇的自動 margin
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://www.hztianpu.com/yun/109869.html
摘要：沉底效果重點代碼總結以上三種方法都屬于沒什么副作用的，其實實現這種沉底效果還有別的實現方式，但是對其他布局有影響，這里不贅述，之后有了更好的解決方案，再來更新。 問題背景 很多網站設計一般是兩個部分，content + footer，content里面裝的是網站主體內容，footer里面展示網站的注冊信息等等，因為網站內容高度不定的原因，會出現下面兩種情況：1.內容較少時，這個foot...
摘要：本章集中介紹四個重要的小功能回到頂部浮動按鈕矢量圖標頁腳沉底和粘性側邊欄。因為我們想在全站都擁有這個按鈕，所以將剛寫好的模塊引用到中在后面引入注意模塊用到了，因此要在后面引入。 本章集中介紹四個重要的小功能：回到頂部浮動按鈕、矢量圖標、頁腳沉底和粘性側邊欄。 這幾個功能與Django基本沒啥關系，更多的是前端知識，但是對博客網站都很重要，問的讀者也比較多，因此也集中講一下好了。 回到頂...
摘要：由于包含元素一定會包圍非浮動的子元素而且清除會讓這個子元素位于清除一側浮動元素的下方因此包含元素一定會包含這個子元素以及前面的浮動元素。 浮動元素脫離了文檔流,其父元素也看不到它了,因而也不會包圍它。這種情況有 時候并非我們想要的,下面向大家傳授三種圍住浮動子元素的方法。記住,這三種 方法你都得掌握,這樣才能審時度勢,選擇最合適的一種。 為了演示浮動元素的行為,這種行為對布局會產生...
摘要：為了使包住浮動元素，有以下方法。由于包含元素一定會包圍非浮動元素，而且清除會讓這個子元素位于浮動元素的下方，因此包含元素一定會包含這個子元素以及前面的浮動元素。 Its fun to float. Here is the footer element that runs across the bottom of the page. 這是一張帶標題的圖片，圖片和標...
閱讀 2051·2021-09-22 15:25
閱讀 1549·2019-08-29 12:34
閱讀 2190·2019-08-26 13:57
閱讀 3410·2019-08-26 10:48
閱讀 1629·2019-08-26 10:45
閱讀 1028·2019-08-23 18:23
閱讀 969·2019-08-23 18:01
閱讀 2187·2019-08-23 16:07
