其作用就是当内容区域比较少时，让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. java-5

    1.请查看String.equals()方法的实现代码,注意学习其实现方法 将此字符串与指定的对象比较.当且仅当该参数不为 null,并且是与此对象表示相同字符序列的 String 对象时,结果才为 ...

  2. JVM垃圾收集(GC)算法

    判断对象是否已死 1. 引用计数算法 给对象中添加一个引用计数器,每当一个地方引用它时,计数器值就加1:当引用失败时,计数器值就减1:任何时刻计数器为0的对象就是不能再被使用的. 主流的Java虚拟机 ...

  3. 解析jQuery中extend方法--用法《一》

    extend方法在jQuery中是一个很重要的方法,jQuey内部用它来扩展属性方法.常用语jQuery插件开发. jQuery提供了两个方法,$.extend和$.fn.extend,两个方法内部实 ...

  4. vc中Error spawning cl.exe错误的解决方法.

    可能很多人在安装VC 6.0后有过点击“Compile”或者“Build”后被出现的 “Compiling... ,Error spawning cl.exe”错误提示给郁闷过.很多人的 选择是重装, ...

  5. 2017年2月16日-----------乱码新手自学.net 之MVC模型

    第二篇博文,最近学习的内容还是回到了正题:ASP.NET MVC5之上.虽然EF学了个一知半解,但是用这点知识,看MVC5的MODEL部分应该还是够了.尽管周末还要恶补一下EF才行. (一)MVC简述 ...

  6. Ant 警告:sun.misc.BASE64Decoder 是 Sun 的专用 API,可能会在未来版本中删除

    如果你用Ant编译项目,而且在项目中用了SUN的专用API,你会得到警告信息,然后Ant会报告编译失败: 这当然是不合理的,javac只是警告而已,ant凭什么就直接报失败呢? 其实最好的解决办法是避 ...

  7. keepalived配置文件

    1. 查看进程 ps aux | grep keepalived ,其输出为: [root@lvs-m ~]# ps aux| grep keepalived |grep -v greproot 21 ...

  8. 使用grunt实现web自动化

    1.grunt作用        实现压缩.编译.单元测试等重复性工作 2.需要安装的软件          第一步:从官网获取nodejs的软件包,直接双击进行安装(windows下) 第二步:打开 ...

  9. 关于hession 随笔

    今天遇到一个问题,纠结了很久也没有解决,情况是这样的, 我这个项目使用的是 hession  通信.我做的业务很简单,只是新加了一个接口 ,这 个接口是广告那一块的,数据库在之前的项目里面都没有使用到 ...

  10. Linux i2c子系统(四) _从i2c-s3c24xx.c看i2c控制器驱动的编写

    "./drivers/i2c/busses/i2c-s3c2410.c"是3.14.0内核中三星SoC的i2c控制器驱动程序, 本文试图通过对这个程序的分析, 剥离繁复的细节, 总 ...