前段时间工作中遇到粘性页脚的需求,以前用过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. 浅谈Android选项卡（四）

    前面几篇介绍的选项的用法,基本上使用TabActivity.ViewPager.已经基本上满足开发需求了.但是这里再介绍一种小技巧,在有的时候,感觉使用前面的ViewPager和Fragment时候, ...

  2. iOS 基础之NSArray数组去重

    1.面试题 现在有一个数组arr1,它里面存储的字符串分别为@“zhangsan”@“lisi”@“wangwu”@“lisi”@“zhangsan”,请将它去重后赋值给可变数组arr2输出为:@“z ...

  3. webpack+vue中安装使用vue-layer弹窗插件

    1.安装vue-layer插件 npm install vue-layer --save-dev 2.打包入口文件main.js中引入vue.vue-layer.并且将vue-layer添加到vue原 ...

  4. 初始linux系统--ubuntu

    ubuntu操作系统  1. Linux系统组成 Linux内核软件程序用于实现CPU和内存分配进程调度设备驱动等核心操作,以面向硬件为主 外围程序面向用户为主,包括分析用户指令的解释器网络服务程序图 ...

  5. SDN定义网络

    http://edu.51cto.com/course/course_id-4466.html http://edu.51cto.com/course/course_id-4497.html

  6. Monkey and Banana

    Monkey and BananaTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  7. 搭建django环境

    一.安装django(两种方式) 1.pip install django 2.python setup.py install(下载gjango包:https://www.djangoproject. ...

  8. 查看APK包签名的方法。

    1.查看 keystore $ keytool -list -keystore debug.keystore 结果: Keystore type: JKS Keystore provider: SUN ...

  9. 开源项目-Aiguille

        项目地址: https://github.com/wwkai555/Aiguille 这个项目主要使用Android L新特性 - 最新的widget以及一些值得推荐和使用的开源库比如butt ...

  10. CentOS7编译curl

    1.下载curl源代码 https://curl.haxx.se/download.html 2.进入curl目录 ./configure --prefix=/usr/local/curl make ...