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

資訊專欄INFORMATION COLUMN

Sticky Foolter 幾種實現方式

PrototypeZ / 3051人閱讀

摘要：但如果網頁內容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。只需要幾行代碼就可以實現，而且像上面計算或添加額外的元素。

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

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


    頂部




    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分




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

細心讀者應該發現問題了,底部 footer 位置會隨著主體內容高度變化自動變化,當主體內容小于視口的高度時, 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屬性值時可以執行一些計算.
它可以用在一些數值場合; 詳細可以查閱這里 MDN

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

詳細信息以及兼容可以查閱這里: caniuse

針對上面的代碼進行修改,如下

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

這樣完成我們期望的,但是有個缺點就是每次我們都要去計算 header、footer 的高度.
這顯然不完美, 假如DOM結構層級多的話,需要計算的內容更多.

absolute

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


    頭部




    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分

    
中間部分




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的應用：

1 默認情況下, 當給某個元素設置為 position:absolute 時, 在祖先元素沒有設置 position: absolute or fixed or relative
時, 其默認相對于初始包含塊( 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)為默認為初始化包含塊,其初始化塊的大小為視口的大小.

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

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

    body{
        margin-bottom: 50px;
    }

position:relative 改變包含塊,讓設置absolute元素根據html元素來進行定位.

min-height: 保證在內容不足視口時, footer能黏貼在底部.

margin-bottom 值為 footer 元素的高度,這樣保證內容區域不會被footer遮住.

Flexbox

Flexbox是最完美的方案。只需要幾行CSS代碼就可以實現，而且像上面計算或添加額外的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 實現方式; 具體用那種可以根據具體場景來使用.

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53984.html

相關文章

  • Sticky Foolter 幾種實現方式

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

    張漢慶 評論0 收藏0

  • 學習筆記：讓元素永久置底的幾種方案（css only）

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

    caikeal 評論0 收藏0

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

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

    bitkylin 評論0 收藏0

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

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

    nicercode 評論0 收藏0

  • 【前端詞典】5 種滾動吸頂實現方式的比較[性能升級版]

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

    happyfish 評論0 收藏0

發表評論

0條評論

PrototypeZ

男|高級講師

TA的文章

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