CSS基础-footer元素始终粘在浏览器底部的四种方法

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> CSS基础-footer元素始终粘在浏览器底部的四种方法

本文介绍底部footer元素如何始终粘在浏览器底部。当内容container足够多、可以撑开一屏的时候,底部footer紧跟在内容container后边;而内容container不够多、不足以撑开一屏到达浏览器底部时,底部footer仍然在浏览器底部。需求看下图:(原谅我用了简单粗暴的三原色 ̄□ ̄||)

CSS基础-footer元素始终粘在浏览器底部的四种方法

注:文中所有关键代码写在了 /* key code */里,背景色background-color为辅助调试代码,没有实质用途。

方法一

html和body设置height为100%;用一个包裹元素wrapper包住除了底部footer之外的所有内容container,给包裹元素wrapper设置min-height为100%、设置负的margin-bottom等于底部footer的高度;内容container后加一个空的占位元素blank,高度和底部footer一样,防止底部footer盖住内容container。

HTML代码:


    body
        div class="wrapper"
            div class="container"container/div
            div class="blank"/div
        /div
    /body    

CSS代码:


            html, 
            body {
                /* key code */
                height: 100%;
                /* key code */
                margin: 0;
                text-align: center;
            }
            .wrapper {
                /* key code */
                min-height: 100%;
                margin-bottom: -50px;
                /* key code */
            }
            .container {
                background-color: #ff0000;
            }
            .blank, .footer {
                /* key code */
                height: 50px;
                /* key code */
            }
            .blank {
                background-color: #0000ff;
            }
            .footer {
                background-color: #ffff00;
            }  

方法二

内容container设置padding-bottom等于底部footer的高度,底部footer设置负的margin-top等于底部footer的高度。

html和body设置height为100%;用一个包裹元素wrapper包住除了底部footer之外的所有内容container,给包裹元素wrapper设置min-height为100%;内容container设置padding-bottom等于底部footer的高度;底部footer设置负的margin-top等于底部footer的高度。

HTML代码:


    body
        div class="wrapper"
            div class="container"container/div
        /div
        div class="footer"footer/div
    /body

CSS代码:


           html, 
           body {
                /* key code */
                height: 100%;
                /* key code */
                margin: 0;
                text-align: center;
            }
            .wrapper {
                /* key code */
                min-height: 100%;
                /* key code */
            }
            .container {
                /* key code */
                padding-bottom: 50px;
                /* key code */
                background-color: #ff0000;
            }
            .footer {
                /* key code */
                height: 50px;
                margin-top: -50px;
                /* key code */
                background-color: #ffff00;
            }

方法三

使用flexbox布局。

html设置height为100%;body使用flexbox布局、设置min-heigint为100%;内容container设置flex为1,意在内容container分配body除去底部footer后的全部剩余空间。

HTML代码:


    body
        div class="container"container/div
        div class="footer"footer/div
    /body

CSS代码:


            html, 
            body {
                margin: 0;
                text-align: center;
            }
            html {
                /* key code */
                height: 100%;
                /* key code */
            }
            body {
                /* key code */
                min-height: 100%;
                display: flex;
                flex-direction: column;
                /* key code */
            }
            .container {
                /* key code */
                flex: 1;
                /* key code */
                background-color: #ff0000;
            }
            .footer {
                height: 50px;
                background-color: #ffff00;
            }

方法四

html设置height为100%;使用calc()计算内容container的最小高度,设置内容container的min-height为(100vh - 底部footer的高度)。

HTML代码:


     body
        div class="container"container/div
        div class="footer"footer/div
    /body

CSS代码:


            html, 
            body {
                /* key code */
                height: 100%;
                /* key code */
                margin: 0;
                text-align: center;
            }
            .container {
                /* key code */
                min-height: calc(100vh - 50px);
                /* key code */
                background-color: #ff0000;
            }
            .footer {
                /* key code */
                height: 50px;
                /* key code */
                background-color: #ffff00;
            }

方法三和方法四用到了CSS3的新属性,会有部分低版本浏览器不支持。

dvdf

始发于微信公众号: 前端麻辣烫

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> CSS基础-footer元素始终粘在浏览器底部的四种方法


 上一篇
CSS编码规范之属性顺序 CSS编码规范之属性顺序
        写css代码的时候有一个好的书写顺序能够帮你节省很多时间,本文整理了被广大前端er接受的CSS书写顺序,如果你有更好的意见,不妨留言告知我们。 CSS书写顺序 CSS书写顺序一般遵从以下规则: 1. Display &a
2021-04-05
下一篇 
CSS基础-块级元素与行内元素 CSS基础-块级元素与行内元素
块级元素是有效有效撑满父元素 行内元素否无效padding有效;margin水平方向有效,竖直方向无效随内部元素的内容变化 行内块级元素否有效有效随内部元素的内容变化 块级元素: 独占一行;元素的宽高、以及内外边距都可设置;元素宽度在不设
2021-04-05