CSS Sticky Footer 幾種實(shí)現(xiàn)方式
我要評(píng)論什么是 “Sticky Footer”
所謂 “Sticky Footer”，并不是什么新的前端概念和技術(shù)，它指的就是一種網(wǎng)頁(yè)效果： 如果頁(yè)面內(nèi)容不足夠長(zhǎng)時(shí)，頁(yè)腳固定在瀏覽器窗口的底部；如果內(nèi)容足夠長(zhǎng)時(shí)，頁(yè)腳固定在頁(yè)面的最底部。但如果網(wǎng)頁(yè)內(nèi)容不夠長(zhǎng)，置底的頁(yè)腳就會(huì)保持在瀏覽器窗口底部。
先來(lái)看看下面的例子, 代碼如下
<div class="header">
頂部
</div>
<div class="main">
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
</div>
<div class="footer">
<i class="fa fa-copyright" aria-hidden="true"></i>
<div>底部</div>
</div>
.header {
background-color: #3498DB;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
}
.main {
overflow: auto;
box-sizing: border-box;
}
.footer {
background-color: #ECF0F1;
height: 50px;
line-height: 50px;
text-align: center;
}
細(xì)心讀者應(yīng)該發(fā)現(xiàn)問(wèn)題了,底部 footer 位置會(huì)隨著主體內(nèi)容高度變化自動(dòng)變化,當(dāng)主體內(nèi)容小于視口的高度時(shí), footer 并沒有黏貼在底部. 那么解決這樣問(wèn)題尼?
negative margin
<div class="main">
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
</div>
<div class="footer">
<i class="fa fa-copyright" aria-hidden="true"></i>
<div>底部</div>
</div>
html,
body {
height: 100%;
}
.header{
background-color: #3498DB;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
position: fixed;
width: 100%;
}
.main {
min-height: 100%;
overflow: auto;
box-sizing: border-box;
padding-bottom: 50px;
padding-top: 50px;
margin-bottom: -50px;
}
.footer {
background-color: #ECF0F1;
height: 50px;
line-height: 50px;
text-align: center;
}
固定高度解決方案
使用如下屬性
- min-height
- calc
- vh
calc() 是 CSS3引入的,讓你在聲明CSS屬性值時(shí)可以執(zhí)行一些計(jì)算.
它可以用在一些數(shù)值場(chǎng)合; 詳細(xì)可以查閱這里MDN
vh(Viewport Height): 顧明思議,表示的是視口的高度.
詳細(xì)信息以及兼容可以查閱這里: caniuse
針對(duì)上面的代碼進(jìn)行修改,如下
.main {
min-height: calc(100vh - 50px - 50px);
}
這樣完成我們期望的,但是有個(gè)缺點(diǎn)就是每次我們都要去計(jì)算 header、footer 的高度.
這顯然不完美, 假如DOM結(jié)構(gòu)層級(jí)多的話,需要計(jì)算的內(nèi)容更多.
absolute
absolute相信大家熟悉不過(guò)了,這里就不在啰嗦了; 這里注意這個(gè)就行, absolute 元素其位置是根據(jù)什么來(lái)進(jìn)行計(jì)算并進(jìn)行定位的?
<div class="header">
頭部
</div>
<div class="main">
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
</div>
<div class="footer">
<i class="fa fa-copyright" aria-hidden="true"></i>
<div>底部</div>
</div>
html{
position: relative;
min-height: 100%;
}
body{
margin-bottom: 50px;
}
.header {
background-color: #3498DB;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
}
.main {
overflow: auto;
}
.footer {
position: absolute;
bottom:0;
width: 100%;
background-color: #ECF0F1;
height: 50px;
line-height: 50px;
text-align: center;
}
代碼是不是很簡(jiǎn)單,這里主要 position的應(yīng)用：
1 默認(rèn)情況下, 當(dāng)給某個(gè)元素設(shè)置為 position:absolute 時(shí), 在祖先元素沒有設(shè)置 position: absolute or fixed or relative
時(shí), 其默認(rèn)相對(duì)于初始包含塊( initial containing block ).
2 什么初始化包含塊?
The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin;
這是w3c對(duì)包含塊介紹, 這段話大概意思, 根元素(document)為默認(rèn)為初始化包含塊,其初始化塊的大小為視口的大小.
理解這幾個(gè)概念后,我們?cè)賮?lái)看上面的代碼就一目了然了!
html{
position: relative;
min-height: 100%;
}
body{
margin-bottom: 50px;
}
- position:relative 改變包含塊,讓設(shè)置absolute元素根據(jù)html元素來(lái)進(jìn)行定位.
- min-height: 保證在內(nèi)容不足視口時(shí), footer能黏貼在底部.
- margin-bottom 值為 footer 元素的高度,這樣保證內(nèi)容區(qū)域不會(huì)被footer遮住.
Flexbox
Flexbox是最完美的方案。只需要幾行CSS代碼就可以實(shí)現(xiàn)，而且像上面計(jì)算或添加額外的HTML元素。
修改代碼如下:
<div class="container">
<div class="header">
頂部
</div>
<div class="main">
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
<p>中間部分</p>
</div>
<div class="footer">
<i class="fa fa-copyright" aria-hidden="true"></i>
<div>底部</div>
</div>
</div>
html,
body {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
}
.header {
background-color: #3498DB;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
}
.main {
overflow: auto;
box-sizing: border-box;
flex: 1;
}
.footer {
background-color: #ECF0F1;
height: 50px;
line-height: 50px;
text-align: center;
}
最終效果如下:
negative =margin、固定寬度、absolute 都依賴底部高度為固定.
一般推薦使用 absolute 和 flex 實(shí)現(xiàn)方式; 具體用那種可以根據(jù)具體場(chǎng)景來(lái)使用.
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS Sticky Footer實(shí)現(xiàn)代碼
這篇文章主要介紹了CSS Sticky Footer實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-05
CSS實(shí)現(xiàn)Sticky Footer的示例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)Sticky Footer的示例代碼的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-24
詳解CSS經(jīng)典布局之Sticky footer布局
這篇文章主要介紹了詳解CSS經(jīng)典布局之Sticky footer布局的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-08
詳解Sticky Footer 絕對(duì)底部的兩種套路
這篇文章主要介紹了詳解Sticky Footer 絕對(duì)底部的兩種套路，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-03
css sticky footer經(jīng)典布局的實(shí)現(xiàn)
這篇文章主要介紹了css sticky footer經(jīng)典布局的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-03-02
