成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

前端必懂之Sticky Footer(粘性頁(yè)腳)

piapia / 2646人閱讀

摘要：寫(xiě)在最前是的一種布局場(chǎng)景。頁(yè)腳永遠(yuǎn)固定在頁(yè)面的底部，頁(yè)面內(nèi)容不夠長(zhǎng)的時(shí)候頁(yè)腳黏在視窗底部，內(nèi)容足夠長(zhǎng)時(shí)會(huì)被向下移動(dòng)。老式門(mén)戶網(wǎng)站由于內(nèi)容過(guò)短常常版權(quán)頁(yè)腳前移，移動(dòng)端特定布局也需要來(lái)解決這些問(wèn)題。

寫(xiě)在最前：Sticky Footer是css的一種布局場(chǎng)景。頁(yè)腳footer永遠(yuǎn)固定在頁(yè)面的底部，頁(yè)面內(nèi)容不夠長(zhǎng)的時(shí)候頁(yè)腳黏在視窗底部，內(nèi)容足夠長(zhǎng)時(shí)會(huì)被向下移動(dòng)。老式門(mén)戶網(wǎng)站由于內(nèi)容過(guò)短常常版權(quán)頁(yè)腳前移，移動(dòng)端特定布局也需要Sticky Footer來(lái)解決這些問(wèn)題。

一、利用絕對(duì)定位和padding完美兼容

已知底部高度，利用絕對(duì)定位和padding完美兼容
https://codepen.io/qietuniu/pen/KYxMwv

去除標(biāo)簽多余的margin,padding,給html和body設(shè)置100%

外部容器min-height為100%，使得內(nèi)容少時(shí)也能撐開(kāi)

主體內(nèi)容設(shè)置padding-bottom，這個(gè)為底部的高度，可以使內(nèi)容完全顯示否則會(huì)使主體內(nèi)容有底部面積大小區(qū)域被遮擋

footer高度固定，進(jìn)行絕對(duì)定位

DOM節(jié)點(diǎn)

樣式代碼

html,
body {
  height: 100%;
}
.container {
  position: relative;
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6不識(shí)別min-height*/
}
.section {
  padding-bottom: 60px;
}
.footer {
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0px;
}
二、利用padding-bottom和margin-top完美兼容

已知底部高度，利用padding-bottom和margin-top完美兼容
https://codepen.io/qietuniu/pen/dLqpdR

去除標(biāo)簽多余的margin,padding,給html和body設(shè)置100%；

外部容器min-height為100%，使得內(nèi)容少時(shí)也能撐開(kāi)

主體內(nèi)容設(shè)置padding-bottom，這個(gè)為底部的高度

footer高度固定，margin-top的值為高度負(fù)值，footer與container同級(jí)。

DOM節(jié)點(diǎn)

樣式代碼

html,
body {
  height: 100%;
}
.container {
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6不識(shí)別min-height*/
}
.section {
  padding-bottom: 60px;
}
.footer {
  position: relative;
  margin-top: -60px;
  width: 100%;
  height: 60px;
}
三、新增塊級(jí)元素填補(bǔ)頁(yè)腳遮擋

已知底部高度，新增塊級(jí)元素填補(bǔ)頁(yè)腳遮擋，實(shí)現(xiàn)完美兼容
https://codepen.io/qietuniu/pen/dLqpez

去除標(biāo)簽多余的margin,padding,給html和body設(shè)置100%；

外部容器min-height為100%，使得內(nèi)容少時(shí)也能撐開(kāi)

主體內(nèi)容設(shè)置margin-bottom，值為底部的高度的負(fù)值

footer位置在與container同級(jí)，section同級(jí)新增塊元素.底部和新增塊元素高度一致

DOM節(jié)點(diǎn)

樣式代碼

html,
body {
  height: 100%;
}
.container {
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6不識(shí)別min-height*/
  margin-bottom: -60px;
}
.placeholder,
.footer {
  height: 60px;
}
四、用表格屬性實(shí)現(xiàn)完美兼容

底部不定高度，利用表格屬性實(shí)現(xiàn)完美兼容
https://codepen.io/qietuniu/pen/QPVKVR

去除標(biāo)簽多余的margin,padding,給html和body設(shè)置100%

外部容器min-height為100%;使得內(nèi)容少時(shí)也能撐開(kāi)，display屬性設(shè)置為table

主體內(nèi)容display屬性設(shè)置為table-row，高度設(shè)置為100%

DOM節(jié)點(diǎn)

樣式代碼

html,
body {
  height: 100%;
}
.container {
  display: table;
  width: 100%;
  min-height: 100%;
}
.section {
  display: table-row;
  height: 100%;
}
五、calc計(jì)算

vh存在兼容有限，一般在移動(dòng)端使用。100vh可代替body和html的100%來(lái)拿到視口高度實(shí)現(xiàn)效果
https://codepen.io/qietuniu/pen/NmLRmV

外部容器使用calc計(jì)算，100vh減去底部高度

footer位置與container同級(jí)，高度固定

主體內(nèi)容display屬性設(shè)置為table-row，高度設(shè)置為100%

DOM節(jié)點(diǎn)

樣式代碼

.container {
  min-height: calc(100vh - 60px);
}
.footer {
  height: 60px;
}
六、flex彈性布局

底部不定高度，利用flex彈性布局實(shí)現(xiàn)效果，兼容性有限建議移動(dòng)端使用
https://codepen.io/qietuniu/pen/EJeNYW

外部容器display設(shè)為flex彈性布局，flex-flow設(shè)置方向?yàn)閏olumn縱向并設(shè)置最小高度為100vh

主體內(nèi)容flex屬性設(shè)為1

DOM節(jié)點(diǎn)

樣式代碼

.container {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
.section {
  flex: 1
}
七、Grid網(wǎng)格布局

底部不定高度，利用Grid網(wǎng)格實(shí)現(xiàn)效果，兼容性有限建議移動(dòng)端使用
https://codepen.io/qietuniu/pen/EJeNYW

外部容器display設(shè)為grid網(wǎng)格布局，grid-template-rows設(shè)置一個(gè)網(wǎng)格的行，fr單位可以幫助我們創(chuàng)建一個(gè)彈列的網(wǎng)格軌道,它代表了網(wǎng)格容器中可用的空間（就像Flexbox中無(wú)單位的值）

header頭部的位置放在主體內(nèi)容內(nèi)部

footer中g(shù)rid-row-start和grid-row-end屬性設(shè)置單元格開(kāi)始和結(jié)束的行線

DOM節(jié)點(diǎn)

樣式代碼

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}
結(jié)語(yǔ)

以上方法各有優(yōu)劣，根據(jù)使用場(chǎng)景選擇合適的方案

場(chǎng)景 方案
兼容性要求高 ①②③
底部不固定高度 ④⑥⑤⑦
PC端建議 ①②
移動(dòng)端建議 ①②⑥

完整代碼

尊重原創(chuàng)，如需轉(zhuǎn)載請(qǐng)注明出處！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54931.html

相關(guān)文章

  • 前端必懂之Sticky Footer(粘性頁(yè)腳)

    摘要：寫(xiě)在最前是的一種布局場(chǎng)景。頁(yè)腳永遠(yuǎn)固定在頁(yè)面的底部，頁(yè)面內(nèi)容不夠長(zhǎng)的時(shí)候頁(yè)腳黏在視窗底部，內(nèi)容足夠長(zhǎng)時(shí)會(huì)被向下移動(dòng)。老式門(mén)戶網(wǎng)站由于內(nèi)容過(guò)短常常版權(quán)頁(yè)腳前移，移動(dòng)端特定布局也需要來(lái)解決這些問(wèn)題。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 寫(xiě)在最前：Sticky Footer是css的一種布局場(chǎng)景。頁(yè)腳foot...

    jifei 評(píng)論0 收藏0

  • Django搭建個(gè)人博客：回到頂部浮動(dòng)按鈕、矢量圖標(biāo)、頁(yè)腳沉底和粘性側(cè)邊欄

    摘要：本章集中介紹四個(gè)重要的小功能回到頂部浮動(dòng)按鈕矢量圖標(biāo)頁(yè)腳沉底和粘性側(cè)邊欄。因?yàn)槲覀兿朐谌径紦碛羞@個(gè)按鈕，所以將剛寫(xiě)好的模塊引用到中在后面引入注意模塊用到了，因此要在后面引入。 本章集中介紹四個(gè)重要的小功能：回到頂部浮動(dòng)按鈕、矢量圖標(biāo)、頁(yè)腳沉底和粘性側(cè)邊欄。 這幾個(gè)功能與Django基本沒(méi)啥關(guān)系，更多的是前端知識(shí)，但是對(duì)博客網(wǎng)站都很重要，問(wèn)的讀者也比較多，因此也集中講一下好了。 回到頂...

    lovXin 評(píng)論0 收藏0

  • CSS粘性定位是怎樣工作的

    摘要：怎樣才能讓粘性定位起作用粘性定位有兩個(gè)主要部分，粘性元素和粘性容器。這是粘性元素可以浮動(dòng)的最大區(qū)域。最好是在以粘性容器底部為自然位置的元素上使用它。 翻譯：瘋狂的技術(shù)宅原文：https://medium.com/@elad/css-... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 瀏覽器對(duì) CSS粘性定位有著非常好的支持，但很多...

    Wildcard 評(píng)論0 收藏0

  • CSS粘性定位是怎樣工作的

    摘要：怎樣才能讓粘性定位起作用粘性定位有兩個(gè)主要部分，粘性元素和粘性容器。這是粘性元素可以浮動(dòng)的最大區(qū)域。最好是在以粘性容器底部為自然位置的元素上使用它。 翻譯：瘋狂的技術(shù)宅原文：https://medium.com/@elad/css-... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 瀏覽器對(duì) CSS粘性定位有著非常好的支持，但很多...

    lovXin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<