国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Sticky Foolter 幾種實(shí)現(xiàn)方式

張漢慶 / 726人閱讀

摘要：但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。只需要幾行代碼就可以實(shí)現(xiàn)，而且像上面計(jì)算或添加額外的元素。

CSS實(shí)現(xiàn)Sticky Footer 什么是 “Sticky Footer” 
所謂 “Sticky Footer”，并不是什么新的前端概念和技術(shù)，它指的就是一種網(wǎng)頁效果： 如果頁面內(nèi)容不足夠長時(shí)，頁腳固定在瀏覽器窗口的底部；如果內(nèi)容足夠長時(shí)，頁腳固定在頁面的最底部。但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。

先來看看下面的例子, 代碼如下


    頂部




    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分




.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)問題了,底部 footer 位置會隨著主體內(nèi)容高度變化自動變化,當(dāng)主體內(nèi)容小于視口的高度時(shí), footer 并沒有黏貼在底部. 那么解決這樣問題尼?

negative margin 

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分





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ù)值場合; 詳細(xì)可以查閱這里 MDN

vh(Viewport Height): 顧明思議,表示的是視口的高度.

詳細(xì)信息以及兼容可以查閱這里: caniuse

針對上面的代碼進(jìn)行修改,如下

.main {
    min-height: calc(100vh - 50px - 50px);
}

這樣完成我們期望的,但是有個(gè)缺點(diǎn)就是每次我們都要去計(jì)算 header、footer 的高度.
這顯然不完美, 假如DOM結(jié)構(gòu)層級多的話,需要計(jì)算的內(nèi)容更多.

absolute

absolute相信大家熟悉不過了,這里就不在啰嗦了; 這里注意這個(gè)就行, absolute 元素其位置是根據(jù)什么來進(jìn)行計(jì)算并進(jìn)行定位的?


    頭部




    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分




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;
}

代碼是不是很簡單,這里主要 position的應(yīng)用：

1 默認(rèn)情況下, 當(dāng)給某個(gè)元素設(shè)置為 position:absolute 時(shí), 在祖先元素沒有設(shè)置 position: absolute or fixed or relative
時(shí), 其默認(rèn)相對于初始包含塊( 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對包含塊介紹, 這段話大概意思, 根元素(document)為默認(rèn)為初始化包含塊,其初始化塊的大小為視口的大小.

理解這幾個(gè)概念后,我們再來看上面的代碼就一目了然了!

    html{
        position: relative;
        min-height: 100%;
    }

    body{
        margin-bottom: 50px;
    }

position:relative 改變包含塊,讓設(shè)置absolute元素根據(jù)html元素來進(jìn)行定位.

min-height: 保證在內(nèi)容不足視口時(shí), footer能黏貼在底部.

margin-bottom 值為 footer 元素的高度,這樣保證內(nèi)容區(qū)域不會被footer遮住.

Flexbox

Flexbox是最完美的方案。只需要幾行CSS代碼就可以實(shí)現(xiàn)，而且像上面計(jì)算或添加額外的HTML元素。

Flexbox介紹可以查閱 阮一峰老師這邊文章
修改代碼如下:


    

        頂部
    

    

        
中間部分

        
中間部分

        
中間部分

        
中間部分

        
中間部分

        
中間部分

        
中間部分

        
中間部分

        
中間部分

        
中間部分

        
中間部分

        
中間部分

        
中間部分

        
中間部分

        
中間部分

    

    

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 都依賴底部高度為固定.

一般推薦使用 flex box 實(shí)現(xiàn)方式; 具體用那種可以根據(jù)具體場景來使用.

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114746.html

相關(guān)文章

  • Sticky Foolter 幾種實(shí)現(xiàn)方式

    摘要：但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。只需要幾行代碼就可以實(shí)現(xiàn)，而且像上面計(jì)算或添加額外的元素。 CSS實(shí)現(xiàn)Sticky Footer 什么是 Sticky Footer 所謂 Sticky Footer，并不是什么新的前端概念和技術(shù)，它指的就是一種網(wǎng)頁效果： 如果頁面內(nèi)容不足夠長時(shí)，頁腳固定在瀏覽器窗口的底部；如果內(nèi)容足夠長時(shí)，頁腳固定在頁面的最底部。但如果網(wǎng)頁內(nèi)...

    PrototypeZ 評論0 收藏0

  • 學(xué)習(xí)筆記：讓元素永久置底的幾種方案（css only）

    摘要：我們權(quán)且把這種解決方案叫術(shù)語解釋顧名思義就是使用來實(shí)現(xiàn)有粘性的置底元素。下面就為大家講講幾種解決方案，以及這些解決方案的優(yōu)缺點(diǎn)和兼容性。 前言 很多同學(xué)在使用css+html寫頁面的時(shí)候，可能會遇到這樣的場景： 頁面除了頭部和底部外，中間部分的內(nèi)容為空時(shí)，頁面就會出現(xiàn)底部向上頂，也就是頭部和底部黏在一起了。 最近開發(fā)頁面，也遇到了這個(gè)問題，經(jīng)過查閱很多文章和資料后，整理出這篇文章，希望...

    caikeal 評論0 收藏0

  • 那些年，碰上過的面試題

    摘要：元素在跨越特定閾值前為相對定位，之后為固定定位。和簡單介紹和，哪個(gè)會觸發(fā)哪個(gè)觸發(fā)順序，哪個(gè)能夠避免，哪個(gè)時(shí)盡量減少而不可能避免，哪些操作會觸發(fā)阮一峰動畫動畫與動畫區(qū)別性能區(qū)別性能優(yōu)化動畫性能優(yōu)化動畫介紹后續(xù)還會繼續(xù)進(jìn)行面試題的積累 記錄一下最近碰上的面試題 js篇 介紹一下Array的API/方法，具體到返回值和參數(shù) join / slice / splice / sort / pu...

    bitkylin 評論0 收藏0

  • 那些年，碰上過的面試題

    摘要：元素在跨越特定閾值前為相對定位，之后為固定定位。和簡單介紹和，哪個(gè)會觸發(fā)哪個(gè)觸發(fā)順序，哪個(gè)能夠避免，哪個(gè)時(shí)盡量減少而不可能避免，哪些操作會觸發(fā)阮一峰動畫動畫與動畫區(qū)別性能區(qū)別性能優(yōu)化動畫性能優(yōu)化動畫介紹后續(xù)還會繼續(xù)進(jìn)行面試題的積累 記錄一下最近碰上的面試題 js篇 介紹一下Array的API/方法，具體到返回值和參數(shù) join / slice / splice / sort / pu...

    nicercode 評論0 收藏0

  • 【前端詞典】5 種滾動吸頂實(shí)現(xiàn)方式的比較[性能升級版]

    摘要：用于獲得當(dāng)前元素到定位父級頂部的距離偏移值。后來在項(xiàng)目中總會遇到滾動吸頂?shù)男Ч枰獙?shí)現(xiàn)，現(xiàn)在我將我知道的種滾動吸頂實(shí)現(xiàn)方式做詳細(xì)介紹。有兼容性問題，在微信瀏覽器某些版本中的值會為，于是乎也就有了第三種方案的兼容性寫法。修改版預(yù)覽 這篇文章是三天前寫就的，有大佬給我提了一些修改意見，我覺得這個(gè)意見確實(shí)中肯。所以就有了這個(gè)升級的修改版本。代碼同步更新到 GitHub 了。 修改內(nèi)容如下： 添加...

    happyfish 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<