学习一下sticky-footer

什么是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的更多相关文章

CSS Sticky Footer
----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局 http://www.w3c ...
sticky footer布局，定位底部footer
其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...
实现sticky footer的五种方法
2017-04-19 16:24:48 什么是sticky footer 如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送. 用position实现? 如果是用 ...
两种最常用的Sticky footer布局方式
Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...
Sticky Footer 绝对底部的两种套路
最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果: ...
【CSS】Sticky Footer 布局
什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...
【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
sticky footer布局
一.什么是sticky footer 在网页设计中,Sticky footers设计是最古老和最常见的效果之一.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块 ...
Sticky Footer，完美的绝对底部
写在前面做过网页开发的同学想必都遇到过这样尴尬的排版问题:在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我 ...
css sticky footer 布局手机端
什么是css sticky footer 布局? 通常在手机端写页面会遇到如下情况页面长度很短不足以撑起一屏,此时希望页脚在页面的底部而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...

随机推荐

php变量函数
这个东西相当于C语言中的函数指针,C#里的委托 function come() { //定义com函数 echo "来了<p>" ...
通过setup.py安装项目dependencies
一.使用方法安装命令 $ pip install -e <option> setup.py 二.具体介绍 pip intall -e 举例一个setup.py $ pip int ...
ECMAScript 6 新特性-set。const
一.let命令是es6新增的特性,作用与var命令类似,声明变量,不同之处在于声明的变量的作用域为块级作用域.引入let后带来了很多新的特性. 1作用域,es5之前之后函数作用域和全局作用域,let的 ...
数据库新增“自动添加”类字段 auto_now_add 如何不影响之前数据
django 中的模版为例:time = models.DateTimeField('创建时间', auto_now_add=True)这样显然是不行的.那么.我们可以考虑先给前面数据一个默认值迁移一 ...
gentoo 画框架图，流程图
需要话框架图,流程图的时候,只需要安装 dia 软件就可以了.
thingsboard改造使用mysql数据库
thingsboard从2.2版本开始,兼容关系型数据库与非关系型数据库共用(关系型数据库保存实体类信息.非关系型数据库cassandra保存遥测数据信息).由于国内偏向使用mysql数据库,而非po ...
Python校验用户名是否合法示例
#校验用户名是否合法例子: #输入账号密码 #input #如果账号存在提示已经注册,如果不存在的,就可以注册 all_users [] #不能为空 #strip() #用户名长度6-12之间 #le ...
应用MySQL（开启远程登录权限）
参考“开启MySQL远程访问权限允许远程连接”.
Javascript 使用 async 声明符和 await 操作符进行异步操作
async function 声明用于定义一个返回 AsyncFunction 对象的异步函数 await 操作符用于等待一个Promise 对象.它只能在异步函数 async function 中 ...
Tomcat下载以及安装、eclipse工具配置tomcat9的具体步骤
(小白经验,大咖勿喷) 开始学javaweb的一些技术了,最让人头疼的就是环境的配置以及必要软件的安装,比如数据库mysql.服务器Tomcat.eclipse工具等等. 自己也度娘了很多大咖的经验, ...

学习一下sticky-footer

什么是sticky-footer?

1.负margin布局方式

2.flex布局方式

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

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

随机推荐

热门专题