前段时间工作中遇到粘性页脚的需求,以前用过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. sqlmap注入之tamper绕过WAF脚本列表

    本文作者:i春秋作者——玫瑰 QQ2230353371转载请保留文章出处 使用方法--tamper xxx.py apostrophemask.py用UTF-8全角字符替换单引号字符 apostrop ...

  2. vue + ElementUI 表格筛选框的高度设置，超出一定高度，显示滚动条

    相信有很多小伙伴遇到过这个问题,首先还是来看图片,筛选框我做了处理,所以和官网的有点小差别 官方网站和个人网站对比图如下: 代码如下:(F12找到该元素的class,设置高度) .el-table-f ...

  3. [Flex] 组件Tree系列 —— 运用variableRowHeight和wordWrap设置可变行高

    mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:运用variableRowHeig ...

  4. 分享一些JAVA常用的学习网站

    常用学习网站freecodecamp 一个非常好的网站,教学模式类似游戏中的闯关,通过每关之后会有成就感,在该网站还有设有聊天室,可以进行相关的技术交流,很棒的学习网站. https://www.fr ...

  5. 【性能测试】jmeter的坑(1)——如何在多网卡情况下正确连接

    问题现象: 性能测试时,使用的服务器配置了双网卡,windows客户机配置了四网卡,坑爹的配置,内外网的隔离,导致在使用jmeter进行分布式测试的时候总是连接失败. 原因分析: Jmeter采用了r ...

  6. iOS 之新特性界面

    1.什么事新特性界面? 新特性界面就是第一次下载程序出现的界面,他的用途是帮助用户快速了解这款APP,所有说还是很有必要学一下的. 2.如何实现新特性界面? 实现思路:从本质上看,新特性界面就是一个全 ...

  7. 在eclipse中，用maven创建web项目

    备注:该文档是之前学习时,根据网上其他童鞋的经验自己测试后梳理,如有侵权,请勿怪,感谢! 1.在eclipse中用maven创建项目,右键new>>Maven Project 2.点击ne ...

  8. Python笔记之字典循环

    Python笔记之字典循环   1.问题 Python是一门比较好入门的编程语言,但是入门简单,当然坑也是有的,今天就来介绍一个我遇到的坑吧,也是很简单的一个,就是当时脑子有点转不过弯来了. 先看代码 ...

  9. SQL语句02（连表查询）

    ---恢复内容开始--- sql1992sql分类    1.笛卡尔积 (表乘表) 例:select * from emp,dept;    2.等值连接 表的连接条件使用“=” 例:select * ...

  10. vue项目微信回退按钮处理

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...