其作用就是当内容区域比较少时，让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. 使用nat方式解决虚拟机联网问题

    本文全文参考:http://jingyan.baidu.com/album/4e5b3e1957979d91901e24f1.html?picindex=1,谢谢 对于很多的linux初学者来说,最开 ...

  2. matlab 逻辑数组及其应用

    这几天学习了matlab的逻辑数组功能,总的感觉就有两点: 第一,通过对原来的数组a进行逻辑判断后得到逻辑数组b 第二,逻辑数组进行某种运算符操作又回到原数组类型 第三,利用逻辑数组mask功能 测试 ...

  3. java中关于转义字符的一个bug

    在java中,你可以定义 char c = '\u4f60'; char m = '\u0045'; char e = '\u554a'; 这样的字面量,例如: System.out.println( ...

  4. JAVA中的数据结构 - 1，红黑树

    背景: 在JDK源码中, 有treeMap和JDK8的HashMap都用到了红黑树去存储 红黑树可以看成B树的一种: 二叉树-->搜索二叉树-->平衡搜索二叉树-->B树--> ...

  5. 安装Sphere v2.7 遇到的问题

    今天在安装Sphere v2.7 的时候,提示错误: /home/lgj/nist/lib/libsphereCombinedLibs.a(shorten.o): In function `short ...

  6. git文件夹下项目更改ip地址小结

    在我们开发的过程中,经常切换项目IP地址是很正常的,之前弄过一次,没有记住,现在简单的总结下: 找到要切换IP地址的项目,点击鼠标右键,弹出下图: 打开该项目的路径后,双击打开该项目,具体参考自己项目 ...

  7. weex官方demo weex-hackernews代码解读(1)

    一.介绍 weex 是阿里出品的一个类似RN的框架,可以使用前端技术来开发移动应用,实现一份代码支持H5,IOS和Android.最新版本的weex已默认将vue.js作为前端框架,而weex-hac ...

  8. LNMP系统服务搭建过程详解

    和LAMP不同的是LNMP中的N指的是Nginx(类似于Apache的一种web服务软件)其他都一样.目前这种环境应用的也是非常之多.Nginx设计的初衷是提供一种快速高效多并发的web服务软件.在静 ...

  9. 从源码解析LinkedList集合

         上篇文章我们介绍了ArrayList类的基本的使用及其内部的一些方法的实现原理,但是这种集合类型虽然可以随机访问数据,但是如果需要删除中间的元素就需要移动一半的元素的位置,效率低下.并且它内 ...

  10. how to use Prolog in C#？ SWI-Prolog

    上个月突然看到Prolog这门语言,它特殊的语法吸引了我,但是经过我一段时间的学习,发现它也不像网络上传说的那样神奇,不过我依然对它很感兴趣,有前辈说Prolog本身并不强大,但是用来作为一门辅助语言 ...