告訴你一個將 footer 保持在底部的最好方法

當(dāng)你在布局網(wǎng)頁時,有可能會遇到類似下面的這種情況

broken_layout.png

導(dǎo)致這一問題的原因是頁面內(nèi)容太少缺虐,無法將內(nèi)容區(qū)域撐開割坠,從而在 footer 下面留下一大塊空白。

本文將介紹一種現(xiàn)代化的方法陨簇,?確保 footer 始終處于頁面的底部吐绵。

解決方法

?解決該問題的最好方法是采用 flexbox——CSS3提供的一種先進布局模型,旨在建立具有適應(yīng)性的布局。如果你對 flexbox 還不怎么熟悉己单,文章最后有一些擴展閱讀鏈接唉窃,可以幫助你了解 flexbox。

我們的演示頁面應(yīng)該具備 Header纹笼、主體內(nèi)容區(qū)域和 Footer纹份,下面是該頁面的 HTML

<body>
    <header>...</header>
    <section class="main-content">...</section>
    <footer>...</footer>
</body>

為了啟用 flex模式,我們將 body 的 display 屬性設(shè)置為 flex, 然后將方向?qū)傩栽O(shè)置為列, (默認(rèn)是行廷痘,也就是橫向布局)蔓涧。同時,將html 和 body 元素的高度設(shè)置為100%笋额,使其充滿整個屏幕元暴。

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

現(xiàn)在,我們需要調(diào)整各個區(qū)域占用的頁面空間兄猩,我們將通過flex 屬性來達(dá)到這一目的茉盏,該屬性實際包含了三個屬性,分別是:

  • flex-grow:元素在同一容器中對可分配空間的分配比率厦滤,及擴展比率
  • flex-shrink:如果空間不足援岩,元素的收縮比率
  • flex-basis:元素的伸縮基準(zhǔn)值

我們希望 header 和footer 只占用他們應(yīng)該占用的空間,將剩余的空間全部交給主體內(nèi)容區(qū)域

header{
   /* 我們希望 header 采用固定的高度掏导,只占用必須的空間 */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

.main-content{
   /* 將 flex-grow 設(shè)置為1享怀,該元素會占用全部可使用空間 
      而其他元素該屬性值為0,因此不會得到多余的空間*/
   /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 1 0 auto;
}

footer{
   /* 和 header 一樣趟咆,footer 也采用固定高度*/
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

最終的效果如下圖所示添瓷。通過點擊中央的粉紅按鈕改變主體內(nèi)容,footer 會始終顯示在頁面的最底部值纱。

correct_layout-e1459357917514.png

demo 頁面地址:http://demo.tutorialzine.com/2016/03/quick-tip-the-best-way-to-make-sticky-footers/ (看效果可能需要翻墻)

結(jié)論

如你說見鳞贷,如果是從零開始構(gòu)建布局,flexbox 將會是你的得力助手虐唠。除了極少數(shù)的例外搀愧,所有的主流瀏覽器都支持 flexbox,?就 IE 來說疆偿,IE9以后的版本都是支持的咱筛。

下面是一些學(xué)習(xí) flexbox 布局模型不錯的教程和速查表

fetalk_qrcode.jpg
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市杆故,隨后出現(xiàn)的幾起案子迅箩,更是在濱河造成了極大的恐慌,老刑警劉巖处铛,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件饲趋,死亡現(xiàn)場離奇詭異拐揭,居然都是意外死亡,警方通過查閱死者的電腦和手機奕塑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進店門堂污,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人爵川,你說我怎么就攤上這事敷鸦。” “怎么了寝贡?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵扒披,是天一觀的道長。 經(jīng)常有香客問我圃泡,道長碟案,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任颇蜡,我火速辦了婚禮价说,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘风秤。我一直安慰自己鳖目,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布缤弦。 她就那樣靜靜地躺著领迈,像睡著了一般。 火紅的嫁衣襯著肌膚如雪碍沐。 梳的紋絲不亂的頭發(fā)上狸捅,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天,我揣著相機與錄音累提,去河邊找鬼尘喝。 笑死,一個胖子當(dāng)著我的面吹牛斋陪,可吹牛的內(nèi)容都是我干的朽褪。 我是一名探鬼主播,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼无虚,長吁一口氣:“原來是場噩夢啊……” “哼鞍匾!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起骑科,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎构拳,沒想到半個月后咆爽,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體梁棠,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年斗埂,在試婚紗的時候發(fā)現(xiàn)自己被綠了符糊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡呛凶,死狀恐怖男娄,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情漾稀,我是刑警寧澤模闲,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站崭捍,受9級特大地震影響尸折,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜殷蛇,卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一实夹、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧粒梦,春花似錦亮航、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至昼蛀,卻和暖如春宴猾,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背叼旋。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工仇哆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人夫植。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓讹剔,卻偏偏與公主長得像,于是被迫代替她去往敵國和親详民。 傳聞我的和親對象是個殘疾皇子延欠,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,933評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,754評論 1 92
  • html和body的高度并不一定相同沈跨,在內(nèi)容少的時候由捎,body的高度要小于html,當(dāng)然這只會出現(xiàn)在body中的內(nèi)...
    cbw100閱讀 5,683評論 0 11
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color饿凛,font狞玛,text-align软驰,li...
    wzhiq896閱讀 1,754評論 0 2
  • 或許有種人只喜歡默默凝望,一言不發(fā)心肪,就像聶魯達(dá)所說的“沉默明亮如燈锭亏,簡單如指環(huán)”。卻又以祈盼的姿勢守護著硬鞍,不求一絲...
    樹欲靜閱讀 388評論 0 3
  • 文/孤鳥差魚 幸福免疫后 接下來 會是什么 別叫我猜 那是蝴蝶該考慮的事
    孤鳥差魚閱讀 292評論 0 3