什么是sticky-footer?

当页面长度不够长的时候，页脚粘贴在视窗底部：如果页面足够长时页脚会被内容向下推送。

实现方式：

1.负margin布局方式

    给内容div加一个父div,设置父div最小高度100%,内容div的padding-bottom为footer高度，给footer预留位置

    footer设置margin-top为负的footer高度，position为relative

    这样当页面内容少时，由于content的父div有最小高度100%，且footer有负margin-top，所以刚好处于页面底部；

    页面内容较多时，footer区块随着content自动撑开，且正好处于content的padding-bottom位置

    注意：content元素的padding-bottom、footer元素的高度以及footer元素的margin-top值必须要保持一致。

    这种负margin的布局方式，是兼容性最佳的布局方案，各大浏览器均可完美兼容，适合各种场景，

    但使用这种方式的前提是必须要知道footer元素的高度，且结构相对较复杂。

    为了保证兼容性，需要在wrapper上添加clearfix类.

2.flex布局方式

    内容和footer的父div设置display：flex, flex-direction: column;这样content和footer就会垂直排列，

    再给content设置flex:1；footer设置flex：0，这样footer只会占据固有高度

    而内容少时，存在剩余空间，content会自动放大，占据除footer外的剩余空间

    当内容多时，没有多余空间，正常显示

    这样的布局简单使用，比较推荐。

3.为内容区域添加最小的高度

    这种方法需要精确知道content和footer的父div,即视窗的高度，设置content的最小高度为视窗高度减去footer高度

    这样内容少时，content为最小高度，footer在视窗底部

    内容多时，content变高，footer随content滚动

    这个方式和第一种差不多，不过这种方法需要需要精确知道各个div的高度，不方便 
html文件：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>sticky-footer</title>

    <link rel="stylesheet/less" href="sticky-footer.less">

    <script src='./js-util/less.min.js'></script>

</head>

<body>

<div class="main">

    <div class="box box1">

        <div class="content-wrapper clearfix">

            <div class="content">

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

            </div>

        </div>

        <div class="footer">

            我是footer

        </div>

    </div>

    <div class="box box1">

        <div class="content-wrapper clearfix">

            <div class="content">

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

                负margin布局方式<br>

            </div>

        </div>

        <div class="footer">

            我是footer

        </div>

    </div>

    <div class="box box2">

        <div class="content">

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

        </div>

        <div class="footer">

            我是footer

        </div>

    </div>

    <div class="box box2">

        <div class="content">

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

            flex布局方式<br>

        </div>

        <div class="footer">

            我是footer

        </div>

    </div>

    <div class="box box3">

        <div class="content">

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

        </div>

        <div class="footer">

            我是footer

        </div>

    </div>

    <div class="box box3">

        <div class="content">

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

            第三种方式 <br>

        </div>

        <div class="footer">

            我是footer

        </div>

    </div>

</div>

</body>

</html>

　　less文件：

.main {

    height: 800px;

    border: 1px solid #ccc;

    .box {

        float: left;

        width: 250px;

        height: 400px;

        background: #ddd;

        overflow: auto;

        text-align: center;

        padding: 10px;

        .footer {

            height: 100px;

            line-height: 100px;

            background: green;

        }

        &.box1 {

            background: pink;

            .content-wrapper {

                min-height: 100%;

                .content {

                    padding-bottom: 100px;

                }

                .clearfix {

                    display: inline-block;

                }

                .clearfix::after {

                    display: block;

                    content: ".";

                    height: 0;

                    clear: both;

                    visibility: hidden;

                }

            }

            .footer {

                position: relative;

                margin-top: -100px;

            }

        }

        &.box2 {

            background: goldenrod;

            display: flex;

            flex-direction: column;

            .content {

                flex: 1;

            }

            .footer {

                flex: 0;

            }

        }

        &.box3 {

            .content{

                min-height: 300px;;

                box-sizing:border-box;

           }

        }

    }

}

　　实现效果：

学习一下sticky-footer的更多相关文章

  1. CSS Sticky Footer

    ----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局  http://www.w3c ...

  2. sticky footer布局，定位底部footer

    其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...

  3. 实现sticky footer的五种方法

    2017-04-19 16:24:48 什么是sticky footer 如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送. 用position实现? 如果是用 ...

  4. 两种最常用的Sticky footer布局方式

    Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...

  5. Sticky Footer 绝对底部的两种套路

    最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐 绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果: ...

  6. 【CSS】Sticky Footer 布局

    什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...

  7. 【css技能提升】完美的 Sticky Footer 布局

    在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...

  8. sticky footer布局

    一.什么是sticky footer 在网页设计中,Sticky footers设计是最古老和最常见的效果之一.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块 ...

  9. Sticky Footer，完美的绝对底部

    写在前面 做过网页开发的同学想必都遇到过这样尴尬的排版问题:在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我 ...

  10. css sticky footer 布局 手机端

    什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...

随机推荐

  1. JAVA除法保留小数点后两位的两种方法

      1.(double) (Math.round(sd3*10000)/10000.0);  这样为保持4位 (double) (Math.round(sd3*100)/100.0); 这样为保持2位 ...

  2. vue+vuex+axios实现登录、注册页权限拦截

    1.修改config文件夹里的dev.env.js里的BASE_API,把地址改成请求后端的公共部分 1 BASE_API: '"http://192.168.xx.xx"', 2 ...

  3. 缓冲区 subprocess 黏包 黏包的解决方案

    缓冲区: 将程序和网络解耦输入缓冲区输出缓冲区 print('>>>>', server.getsockopt(SOL_SOCKET, SO_SNDBUF)) 查看输出缓冲区大 ...

  4. python-web自动化-Js-滚动条操作

    滚动条操作:当待操作的元素在页面可是区域外时,要将待操作的元素滚动到可视区域当中 步骤:1.先找要将要操作的元素element = driver.find_element_by_xxxx(" ...

  5. .htaccess: Invalid command 'Header', perhaps misspelled or defined by a module not included in the server configuration

    php项目 .htaccess文件配置如下: #文件缓存时间配置 <FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css)$"& ...

  6. 将自己的SpringBoot应用打包发布到Linux下Docker中

    目录 将自己的SpringBoot应用打包发布到Linux下Docker中 1. 环境介绍 2. 开始前的准备 2.1 开启docker远程连接 2.2 新建SpringBoot项目 3. 开始构建我 ...

  7. python学习（一）--python解释器

    python学习模式,每篇都会有一些总结,然后根据总结去查一查,学一学,基础就会很扎实的 python解释器 1.python版本和安装 python2.x和python3.x https://www ...

  8. sys模块学习记录

    import sys s = sys.argv #命令行参数List,第一个元素是程序本身路径 #sys.exit() #退出程序,正常退出时exit(0) s = sys.version #获取Py ...

  9. python算法之插入排序

    插入排序非常类似于整扑克牌.在开始摸牌时,左手是空的,牌面朝下放在桌上.接着,一次从桌上摸起一张牌,并将它插入到左手一把牌中的正确位置上.为了找到这张牌的正确位置,要将它与手中已有的牌从右到左地进行比 ...

  10. thinkphp5.1 使用success();和error();要注意的点

    public function succ() { $this->success(); $this->error(); } 这里的$this-> 老是忘掉 记录一下