前段时间工作中遇到粘性页脚的需求,以前用过JS控制过,最后发现flex布局是解决这类问题的好帮手.

粘性页脚:即使没有足够的内容填充页面，也要将页脚固定到窗口的底部.

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        .box {

          display: flex;

          min-height: 100vh;

          flex-direction: column;

        }

        .main {

          flex: 1;

        }

    </style>

</head>

<body>

    <div class="box">

        <header>header</header>

          <div class="main">main</div>

          <footer>footer</footer>

    </div>

</body>

</html>

这是个简单的实例.可以扩展到其他布局,例如:侧边布局等等.

参考:https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

粘性页脚 Sticky Footer 最佳方式的更多相关文章

  1. 给SharePoint页面加入自己定义页脚Custom footer

    给SharePoint页面加入自己定义页脚Custom footer         在公司做站点设计项目时,须要在页面上加入页脚.         非常多人都把页脚忽视了,认为没什么多大用处,事实上 ...

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

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

  3. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

  4. C# 操作Word 文档——添加Word页眉、页脚和页码

    在Word文档中,我们可以通过添加页眉.页脚的方式来丰富文档内容.添加页眉.页脚时,可以添加时间.日期.文档标题,文档引用信息.页码.内容解释.图片/LOGO等多种图文信息.同时也可根据需要调整文字或 ...

  5. C# 添加Word页眉、页脚和页码

    在Word文档中,我们可以通过添加页眉.页脚的方式来丰富文档内容.添加页眉.页脚时,可以添加时间.日期.文档标题,文档引用信息.页码.内容解释.图片/LOGO等多种图文信息.同时也可根据需要调整文字或 ...

  6. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  7. HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚

    导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...

  8. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

  9. openxml(二) 添加页眉，页脚

    openxml 中 word 文档的结构是如下图: 其中,页眉是 header,属于headerpart 部件,页脚是footer,属于footerpart 部件,图上还有其他的东西,之后会一一介绍. ...

随机推荐

  1. [javascript]——将变量转化为字符串

    这是一个非常常用,但是我自己却经常忘记的一个方法: var item = 'textssdf'; console.log("'"+item+"'") > ...

  2. PHP错误——Allowed memory size of 134217728 bytes exhausted (tried to allocate 32 bytes)

    解释是可用内存已耗尽,这关系到PHP的memory_limit的设置问题. 这里有两种方法解决 1.修改php.ini memory_limit = 128 打开终端输入下列bash命令 cd /pr ...

  3. Java中常用到的文件操作那些事（一）——替换doc文档模板，生成真实合同案例

    工作中,我们时常会遇到一些操作文件的操作,比如在线生成合同模板,上传/下载/解析Excel,doc文档转为pdf等操作.本文就已工作中遇到的在线生成合同为例,简要地介绍一种文档替换写法. 本文目的:给 ...

  4. go 语言学习 1

    Go语言命名 Go语言关键字 1.Go语言有25个关键字: 2.关键字用途: var :用于变量的声明const :用于常量的声明type :用于声明类型func :用于声明函数和方法package ...

  5. CentOS 7 安装RocketMQ遇到的问题汇总

    1.运行broker时提示内存无法分配 解决办法:http://www.bubuko.com/infodetail-2088958.html

  6. Ubuntu 16.04/Mac安装VSCode

    由于Atom打开大文件经常卡死的问题,我转到了VSCode了. 下载: https://code.visualstudio.com/ (链接: https://pan.baidu.com/s/1nvz ...

  7. maven 根据profile，resources，filters来区分部署环境

    项目过程中,在不同的阶段,分别需要部署开发环境,测试环境,线上环境.如果都用一套配置文件,很容易弄乱,所以维持多套配置文件很有必要. maven提供了一组属性以供开发人员灵活搭配,可以根据环境来打包, ...

  8. Chrome DevTools的15个使用技巧(译)

    谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须掌握的工具.大多数前端开发者可能熟悉关于chorme的许多特 ...

  9. jquery mobile 动态加载标签时，无法正常展示样式

    原因 在chrome中审查元素,发现其增加了很多没有直接写在页面上的标签和样式.页面标签首先经过jquery.mobile-1.4.5.min.js的处理,添加了许多标签,然后再用css布局 解决方案 ...

  10. sessionKey/tokenKey

    移动端维持登录状态的机制 1. sessionKey/tokenKey哪里来? 1. 登录成功之后,后台返回. 2. sessionKey/tokenKey生成有什么规则? 1. 后台返回的,按照一定 ...