其作用就是当内容区域比较少时，让footer也能正常定位到底部，以前我们使用js来达到这种效果，其实用css也是完全可以的

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>sticky footer</title>

  <style type="text/css">

  /* 第一步设置盒子为满屏大小 */

    .box{

      position: fixed;

      width: 100%;

      height: 100%;

      top: 0;

      left: 0;

      overflow: auto;

      background: green;

    }

    /* 第二步子盒子设置最小高度且清除浮动 */

    .box .main{

      width: 100%;

      min-height: 100%;

    }

    .box .main .content{

      background: orange;

    }

    /* 第三步footer的高度和margin-top要相等 */

    .box .footer{

      position: relative;

      width: 100%;

      height: 100px;

      background: #f3f3f3;

      margin: -100px auto 0 auto;

      clear: both;

      text-align: center;

    }

    .clearfix{

      display: inline-block;

    }

    .clearfix::after{

      content: ".";

      display: block;

      height: 0;

      line-height: 0;

      visibility: hidden;

      clear: both;

    }

  </style>

</head>

<body>

  <div class="box">

    <div class="main clearfix">

      <div class="content">

        <p>这里是内容区域</p>

        <p>这里是内容区域</p>

        <p>这里是内容区域</p>

      </div>

    </div>

    <div class="footer">这是footer区域</div>

  </div>

</body>

</html>

原理我不清楚，效果很完美

sticky footer布局，定位底部footer的更多相关文章

  1. Sticky footer经典布局--绝对底部布局

    原文转载于:https://cnodejs.org/topic/56ebdf2db705742136388f71 何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头 ...

  2. 【CSS】Sticky Footer 布局

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

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

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

  4. css sticky footer 布局 手机端

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

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

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

  6. 前端经典布局：Sticky footer 布局

    什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...

  7. ios 底部用定位 fixed。在软件盘出来后，页面元素被顶上去一部分，fixed定位的footer也跑到了上面去。解决方法

    ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function() ...

  8. stick footer布局

    需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...

  9. css固定footer到浏览器底部的方法

    <html> <head></head> <body> <div class="page-wrapper"> <d ...

随机推荐

  1. HTML中的a标签实现点击下载

    通常在咱们写项目的时候会遇到上传下载什么的,在上传完文件后会把文件的路径保存到数据库里以便下载,如果想不通过后台直接下载的话,可以把文件路径给a标签的属性href: <a href=" ...

  2. 一步一步在Windows中使用MyCat负载均衡 下篇

    之前在 一步一步在Windows中使用MyCat负载均衡 上篇 中已经讲了如何配置出MyCat.下面讲其相关的使用. 五.配置MyCat-eye 对于MyCat监控官网还提供一个MyCat-eye w ...

  3. Android开发8：数据存储（二）——SQLite数据库和ContentProvider的使用

    前言 啦啦啦各位小伙伴们许久不见了~学期末和过年期间自己忙着做其他事没能及时更新Android开发系列课程的博客,实在是罪过罪过~ 好啦~废话不多说,进入我们今天的主题.今天我们将和大家学习其他的数据 ...

  4. AngularJs ng-repeat指令中怎么实现含有自定义指令的动态html

    今天用angular写table的时候,遇到了一个问题.在ng-repeat中,含有动态的html,而这些html中含有自定义指令. 因为希望实现一个能够复用的table,所以定义了一个指令mySta ...

  5. Javascript高级程序设计——语法、关键字、保留字、变量、数据类型

    1.了解基本语法,JS大小写区分.注释风格.什么是严格模式等. 2.知道ES3和ES5的关键字和保留字大概有哪些,如果使用关键字会报什么错,使用保留字决定于特定浏览器引擎. 3.全局变量和局部变量的定 ...

  6. shell 获取指定目录下文件名

    有两个目录a.b,两个文件夹目录里有一些文件的文件名是一样,不过后缀名不同,我想把a文件夹下跟b文件夹里相同文件名的文件覆盖到b去,并删除b里同名而不同后缀的文件,文件很多    #!/bin/bas ...

  7. LINUX RHEL6.5字符界面安装图形化桌面

    安装RHEL 6.5 系统,也是一波三折.好不容易把系统装上去了,发现没装图形化界面.重装倒是学会了,不过觉得太麻烦,于是有了今天. 查了很多帖子,然后自己一一尝试,发现都是说简单,只要 yum gr ...

  8. .Net程序员学用Oracle系列(19)：我知道的导出和导入

    1.传统的导出/导入工具 1.1.EXP 命令详解 1.2.IMP 命令详解 1.3.EXP/IMP 使用技巧 2.新的导出/导入工具 2.1.EXPDP/IMPDP 参数说明 2.2.EXPDP/I ...

  9. Material Design学习-----SnackBar

    SnackBar是一个和Toast类似的空间,用于弹出提示作用,但是相比于Toast而已,SnackBar会有一个不错的动画效果,同时当手指完成屏幕中其他操作的时候,SnackBar会立即消失.同时可 ...

  10. 第十八篇 js高级知识---作用域链

    一直有想法去写写js方面的东西,我个人是最喜欢js这门语言,喜欢的他的自由和强大,虽然作为脚本语言有很多限制的地方,但也不失为一个好的语言,尤其是在H5出现之后.下面开始说说js的方面的东西,由于自己 ...