其作用就是当内容区域比较少时，让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. swift 运算符快速学习（建议懂ＯＣ或者Ｃ语言的伙伴学习参考）

    昨晚看了swift 的运算符的知识点,先大概说一下,这个点和 c 或者oc 的算运符知识点一样,都是最基础最基础的.其他的最基本的加减乘除就不多说了.注意的有几点点..先说求余数运算: 一 :求余数运 ...

  2. 5天2亿活跃用户，QQ“LBS+AR”天降红包活动后台揭密

    作者:Dovejbwang,腾讯后台开发工程师,参与“LBS+AR”天降红包项目,其所在“2016春节红包联合项目团队”获得2016公司级业务突破奖. 商业转载请联系腾讯WeTest获得授权,非商业转 ...

  3. 【原创】python中文编码问题深入分析（二）：print打印中文异常及显示乱码问题分析与解决

    在学习python以及在使用python进行项目开发的过程中,经常会使用print语句打印一些调试信息,这些调试信息中往往会包含中文,如果你使用python版本是python2.7,或许你也会遇到和我 ...

  4. 获取div滚动条的宽度

    获取滚动条的宽度: function getScrollWidth() { var noScroll, scroll, oDiv = document.createElement('div'); oD ...

  5. js拉起或下载app

    产品提了个需求,通过手机网页判断是否安装了自己公司app,如果安装了则拉起app,没有安装则跳转到下载页. 经过各种查阅资料尝试总结了一个还算可以的办法. 拉起app的原理就是js和原生统一好一个地址 ...

  6. BZOJ 1033: [ZJOI2008]杀蚂蚁antbuster(模拟)

    坑爹的模拟题QAQ DEBUG多了1kb QAQ 按题意做就行了 注意理解题意啊啊啊啊 尼玛输出忘换行wa了3次QAQ CODE: #include<cstdio>#include< ...

  7. 【Java基础】ArrayList工作原理

    ArrayList 以数组实现.节约空间,但数组有容量限制.超出限制时会增加50%容量,用System.arraycopy()复制到新的数组.因此最好能给出数组大小的预估值.默认第一次插入元素时创建大 ...

  8. c++文件读取（一）---输入类使用和查找当前程序路径

    鉴于公司人员流动大,设计一个小的日志定位器,首先要读取日志文件 用输入输出流类操作文件比c的stdio更安全和容易,当然任何此类观点都是对大牛除外 首先是查找当前文件路径,如果用GetCurrentD ...

  9. Debian部署RMI异常：java.rmi.ConnectException: Connection refused to host: 127.0.1.1;

    现象:在windows上部署RMI很顺利,但移到debian上部署后,客户端报异常: java.rmi.ConnectException: Connection refused to host: 12 ...

  10. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...