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