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

miqt 發布于2019-08-29 13:49 / 1292人閱讀

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

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

思路：footer的父層的最小高度是100%，footer設置成相對于父層位置絕對（absolute）置底（bottom：0），父層內要預留（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%; 
    /*設置padding-bottom值大于等于footer的height值，以保證main的內容能夠全部顯示出來而不被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 屬性設置為 flex, 然后將方向屬性設置為列, （默認是行，也就是橫向布局）；同時，將html 和 body 元素的高度設置為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云服務器 footer頁面底部數據統計的兩種方法 json的兩種結構】最優生成樹的兩種算法

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

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

css - 收藏集 - 掘金

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

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

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

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

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

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

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

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

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

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