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

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

摘要：方法一高度固定絕對定位思路的父層的最小高度是，設(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è)置為列, （默認(rèn)是行，也就是橫向布局）；同時(shí)，將html 和 body 元素的高度設(shè)置為100%，使其充滿整個(gè)屏幕。

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

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

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

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

相關(guān)文章

css - 收藏集 - 掘金

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

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

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

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

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

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

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

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

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

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