粘性页脚 Sticky Footer 最佳方式
前段时间工作中遇到粘性页脚的需求,以前用过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 最佳方式的更多相关文章
- 给SharePoint页面加入自己定义页脚Custom footer
给SharePoint页面加入自己定义页脚Custom footer 在公司做站点设计项目时,须要在页面上加入页脚. 非常多人都把页脚忽视了,认为没什么多大用处,事实上 ...
- 两种最常用的Sticky footer布局方式
Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...
- 【转载自W3CPLUS】如何将页脚固定在页面底部
该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...
- C# 操作Word 文档——添加Word页眉、页脚和页码
在Word文档中,我们可以通过添加页眉.页脚的方式来丰富文档内容.添加页眉.页脚时,可以添加时间.日期.文档标题,文档引用信息.页码.内容解释.图片/LOGO等多种图文信息.同时也可根据需要调整文字或 ...
- C# 添加Word页眉、页脚和页码
在Word文档中,我们可以通过添加页眉.页脚的方式来丰富文档内容.添加页眉.页脚时,可以添加时间.日期.文档标题,文档引用信息.页码.内容解释.图片/LOGO等多种图文信息.同时也可根据需要调整文字或 ...
- 将HTML页面页脚固定在页面底部(多种方法实现)
当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...
- HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚
导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...
- 如何将页脚固定在页面底部,4中方法 转载自:W3CPLUS
原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...
- openxml(二) 添加页眉,页脚
openxml 中 word 文档的结构是如下图: 其中,页眉是 header,属于headerpart 部件,页脚是footer,属于footerpart 部件,图上还有其他的东西,之后会一一介绍. ...
随机推荐
- logstash5.5.0同步sql server数据
注意:jdbc.conf和jdbc.sql文件编码都为ANSI jdbc.conf内容如下: input { stdin { } jdbc { jdbc_connection_string => ...
- java使用Redis3--完整模板类
Redis全部指令请参考:http://www.runoob.com/redis/redis-tutorial.html 对应的java模板类 package com.d.work.redis; im ...
- 前端必学内容:webpack3快速入门 1-23节内容参考
前端必学内容:webpack(模块打包器) webpack3 学习内容,点击即可到达 (1).webpack快速入门——如何安装webpack及注意事项 (2).webpack快速入门——webpac ...
- [AS3.0] 解决Number类型计算不精确问题
看下面代码运行结果: trace(256.08+123.1); //379.17999999999995 trace(256.08-123.11); //132.96999999999997 trac ...
- python中的字符串和编码
了解编码之前首先说下这几个词的概率: 位.字节.字符.字符串 1.位(bit)也称为比特 这个其实很简单,因为计算机都是二进制存储数据,也就是0和1,一个0或者1就表示一位.这是计算机存储的最小单位. ...
- 架构师养成记--17.disrunptor 多生产者多消费者
入口: import java.nio.ByteBuffer; import java.util.UUID; import java.util.concurrent.CountDownLatch; i ...
- python之守护进程
主进程创建子进程,然后将该进程设置成守护自己的进程,守护进程就好比崇祯皇帝身边的老太监,崇祯皇帝已死老太监就跟着殉葬了. 关于守护进程需要强调两点: 其一:守护进程会在主进程代码执行结束后就终止 其二 ...
- 题解 p2017 [USACO09DEC]晕牛Dizzy Cows
前言:P大终于又更新了 正文 转送门 由于当时我这个ZZ不知怎么了,这份题解排版可能有些尴尬,建议大家读完题后,看我主程序前的代码的注释,然后看最下面的图片,然后看第一张图片,对不起,望多谅解 以样例 ...
- UVA_11922 Permutation Transformer 【splay树】
一.题目 UVA11922 二.分析 为什么会有伸展树? 伸展树与AVL的区别除了保持平衡的方式不同外,最重要的是在每次查找点时,让该点旋转到根结点,这里可以结合计算机里的局部性原理思考. 伸展树有什 ...
- ElasticSearch 问题分析:No data nodes with HTTP-enabled available
环境:ES-5.4.0版本,部署方式:3master node+2client node+3data node 说明:data node和client node都配置了http.enabled: fa ...