<ul id="m0iwi"></ul>

footer保持在頁面底部的兩種方法

miqt 發(fā)布于2019-08-29 13:49 / 1323人閱讀

摘要：方法一高度固定絕對定位思路的父層的最小高度是，設(shè)置成相對于父層位置絕對置底，父層內(nèi)要預(yù)留的高度。

方法一：footer高度固定+絕對定位

思路：footer的父層的最小高度是100%，footer設(shè)置成相對于父層位置絕對（absolute）置底（bottom：0），父層內(nèi)要預(yù)留（padding-bottom）footer的高度。

html代碼


    HEADER
    MAIN
    FOOTER

css代碼

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}
#container{
    /*保證footer是相對于container位置絕對定位*/
    position:relative;  
    width:100%;
    min-height:100%; 
    /*設(shè)置padding-bottom值大于等于footer的height值，以保證main的內(nèi)容能夠全部顯示出來而不被footer遮蓋；*/  
    padding-bottom: 100px;  
    box-sizing: border-box;
}
header{
    width: 100%;
    height: 200px;
    background: #999;
}
.main{
    width: 100%;
    height: 200px;
    background: orange;
}
footer{
    width: 100%;
    height:100px;   /* footer的高度一定要是固定值*/ 
    position:absolute;
    bottom:0px;
    left:0px;
    background: #333;
}

方法二：采用 flexbox布局模型

思路：我們將 body 的 display 屬性設(shè)置為 flex, 然后將方向?qū)傩栽O(shè)置為列, （默認是行，也就是橫向布局）；同時，將html 和 body 元素的高度設(shè)置為100%，使其充滿整個屏幕。

css代碼

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}
#container{
    display: flex;
    flex-direction: column;
    height: 100%;
}
header{
    background: #999;
    flex: 0 0 60px;
}
.main{
    background: orange;
    flex: 1 0 auto;
}
footer{
    background: #333;
    flex: 0 0 60px;
}

GPU云服務(wù)器云服務(wù)器 footer頁面底部數(shù)據(jù)統(tǒng)計的兩種方法 json的兩種結(jié)構(gòu)】最優(yōu)生成樹的兩種算法

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

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

相關(guān)文章

css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設(shè)計達人，純，可以實現(xiàn)當(dāng)正文內(nèi)容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設(shè)計達人，純CSS，可以實現(xiàn): 當(dāng)正文內(nèi)容很少時，底部位于窗口最下面。當(dāng)改變窗口高度時，不會出現(xiàn)重疊問題。甚至，創(chuàng)造該CSS的人還專門成立一個網(wǎng)站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0
前端經(jīng)典布局：Sticky footer 布局

摘要：使用布局達到了預(yù)期的效果，及時內(nèi)容區(qū)較少，頁腳區(qū)塊也是固定在底部。二布局方式代碼這種方法就是利用布局對視窗高度進行分割。什么是Sticky footer布局？前端開發(fā)中大部分網(wǎng)站，都會把一個頁面分為頭部區(qū)塊、內(nèi)容區(qū)塊、頁腳區(qū)塊，這也是比較。往往底部都要求能固定在屏幕的底部，而非隨著文檔流排布。要實現(xiàn)的樣式可以概括如下：如果頁面內(nèi)容不夠長的時候，頁腳區(qū)塊在屏幕的底部；如果內(nèi)容足夠長的時...

JerryWangSAP 2019-08-02 10:35 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎(chǔ)上進一步優(yōu)化，解決了圣杯布局錯亂問題，實現(xiàn)了內(nèi)容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎(chǔ)上進一步優(yōu)化，解決了圣杯布局錯亂問題，實現(xiàn)了內(nèi)容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎(chǔ)上進一步優(yōu)化，解決了圣杯布局錯亂問題，實現(xiàn)了內(nèi)容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

荊兆峰 2019-08-29 17:13 評論0 收藏0