前段时间工作中遇到粘性页脚的需求,以前用过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. Elasticsearch（9）：使用Logstash-input-jdbc同步数据库中的数

    1.数据同步方式 全量同步与增量同步 全量同步是指全部将数据同步到es,通常是刚建立es,第一次同步时使用.增量同步是指将后续的更新.插入记录同步到es. 2.常用的一些ES同步方法 1). elas ...

  2. Linux 下的 netfilter 认识与常规操作

    Linux 下的 netfilter 认识与常规操作 前言 博客写到今天,1年7个月.可是包含所有写作经历,这个时间线可以达到三年. 上次更新了一篇 "镇站之宝" ,也是本站阅读量 ...

  3. windows10 pip install MySQL-python mysqlclient

    https://dev.mysql.com/downloads/connector/python/ 到上述地址下载对应系统的驱动程序安装即可. 安装mysqlclient方法如下: https://w ...

  4. Python中复制、深拷贝和浅拷贝的区别

    深拷贝定义(deepcopy) 在Python中,由于一切皆对象,所以任何变量都可以被引用,也即可以被赋值给任何变量.但是在Python中,给变量赋值,是区分的,一般情况下,Python中的变量赋值都 ...

  5. XMPPFramework核心类介绍

    XMPPFramework结构 在进入下一步之前,先给大家讲讲XMPPFramework的目录结构,以便新手们更容易读懂文章.我们来看看下图: 虽然这里有很多个目录,但是我们在开发中基本只关心Core ...

  6. C 语言调试信息输出宏定义

    C 语言经常在实际的调试过程中,使用最基本的调试方法printf,我们可以使用__FILENAME__.__FUNCTION__.__LINE__,增加自己的输出宏定义: #define DVR_PR ...

  7. 阿里云 下载的 apache 证书 转换为 pcks8 证书

    第一步: 百度 搜索  rsa 转 pcks8 将 .key 文件 转换成 pcks8.key . 第二部: 将 chain.crt 的 内容 复制到 public.crt 下方.. 新的 publi ...

  8. 我也学习JAVA多线程-join

    在工作中,挺少遇到join关键字,但很多多线程资料和面试过程中,初中级开发工程师总会遇到join. 今天一起学习下join. join的作用:等待指定的时间(当为0时,一直等待),直到这个线程执行结束 ...

  9. .NET中的async和await关键字使用及Task异步调用实例

    其实早在.NET 4.5的时候M$就在.NET中引入了async和await关键字(VB为Async和Await)来简化异步调用的编程模式.我也早就体验过了,现在写一篇日志来记录一下顺便凑日志数量(以 ...

  10. BZOJ3168. [HEOI2013]钙铁锌硒维生素（线性代数＋二分图匹配）

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=3168 题解 首先,我们需要求出对于任意的 \(i, j(1 \leq i, j \leq ...