什么是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. 应用程序嵌入PowerBI报表登陆认证问题解决

    https://github.com/AzureAD/azure-activedirectory-library-for-java/issues/144

  2. SLES Install

    SUSE Linux Enterprise Server 12-SP3:zypper in -t patch SUSE-SLE-SERVER-12-SP3-2017-2036=1 To bring y ...

  3. JavaWeb——关于RequestDispatcher的原理

    RequestDispatcher简介 RequestDispatcher 代表请求的派发者.它有2个动作:forward 和 include .客户端对于任何一个请求,可以根据业务逻辑需要,选择不同 ...

  4. JS 实现兼容浏览器报警提示声音

    <!DOCTYPE HTML> <head> <title>JS实现报警提示音</title> <meta http-equiv="co ...

  5. c#经典三层框架中的SqlHelper帮助类

    using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...

  6. UI自动化之元素定位(xpath、css)

    很早之前就已经写过自动化了,不过点着功能久了就会容易忘记元素定位,尤其是xpath和css定位,所以就花点时间做下总结收集. xpath有两种定位: 一.绝对路径(不推荐使用,除非已经使用了所有方式仍 ...

  7. Python PEP8 编码规范

    代码编排 缩进.缩进4个空格,不能混合使用Tab和空格. 每行最大长度79,文档字符串和注释行最大长度为72,换行可以使用反斜杠,最好使用圆括号. 类和顶层函数定义之间空两行:类中的方法定义以单行分隔 ...

  8. sql语句实现行转列练习

    create table STUDENT_SCORE( name VARCHAR2(20), subject VARCHAR2(20), score NUMBER(4,1));insert into ...

  9. eclipse使用报错集锦

    问题1.Eclipse启动时总是提示“subversive connector discovery”解决方案 解答1:在eclipse_workSpace(工作空间下)\.metadata\.plug ...

  10. Tomcat版本对照表

    导入程序前环境要先配好,环境要想配的正确,版本信息一定要了解. Tomcat版本   6.0 7.0 8.0 8.5 9.0 JDK ≥5.0   ≥6.0       ≥7.0     ≥7.0   ...