前端经典布局：Sticky footer 布局
什么是Sticky footer布局？
前端开发中大部分网站，都会把一个页面分为头部区块、内容区块、页脚区块，这也是比较。往往底部都要求能固定在屏幕的底部，而非随着文档流排布。要实现的样式可以概括如下：如果页面内容不够长的时候，页脚区块在屏幕的底部；如果内容足够长的时候，页脚区块会被内容向下推送。可以以下图展示Sticky footer实现的效果：
在正常的文档流中，页面内容较少的时候，如果不做处理，页脚部分不是固定在视窗底部的。
使用sticky footer布局达到了预期的效果，及时内容区较少，页脚区块也是固定在底部。
实现方式
首先构建简单的布局代码：
<body>
<div class="content"></div>
<div class="footer"></div>
</body>其中content为内容区。方法介绍。
一、为内容区域添加最小高度
这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。例如我们可以添加如下样式：
.content {
min-height: calc(100vh-footer的高度)
}此方法需要知道footer的高度，如果高度不确定此方法不推荐。content的高度也可以用百分比来表示。
二、flex布局方式
html代码：
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer{
flex: 0;
}这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。
二、负margin布局方式实现
基本构架：
html代码
<div class="wrapper clearfix">
<div class="content">
// 这里是页面内容
</div>
</div>
<div class="footer">
// 这里是footer的内容
</div>css代码：
.wrapper {
min-height: 100%;
}
.wrapper .content{
padding-bottom: 50px; /* footer区块的高度 */
}
.footer {
position: relative;
margin-top: -50px; /* 使footer区块正好处于content的padding-bottom位置 */
height: 50px;
clear: both;
}
.clearfix::after {
display: block;
content: ".";
height: 0;
clear: both;
visibility: hidden;
}需要注意的：content元素的padding-bottom与footer元素的高度以及footer元素的margin-top值必须要保持一致。
这种负margin的布局方式，是兼容性最佳的布局方案，各大浏览器均可完美兼容，适合各种场景，但使用这种方式的前提是必须要知道footer元素的高度，且结构相对较复杂。
前端经典布局：Sticky footer 布局的更多相关文章
- 【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
- 两种最常用的Sticky footer布局方式
Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...
- 【CSS】Sticky Footer 布局
什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...
- css sticky footer 布局 手机端
什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...
- sticky footer布局，定位底部footer
其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...
- sticky footer布局
一.什么是sticky footer 在网页设计中,Sticky footers设计是最古老和最常见的效果之一.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块 ...
- css经典布局—Sticky footers布局
参考:http://www.w3cplus.com/CSS3/css-secrets/sticky-footers.html 效果:将footer固定到底部.文章内容不足满屏时 footer在底部,超 ...
- css sticky footer 布局
方法一:footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom.是为了防止负 margin 导致 footer 覆盖任何实 ...
- css经典布局—stick footer布局
html部分 <div id="wrap"> <div id="main" class="clearfix"> &l ...
随机推荐
- git 指定从其他分支拉取commit
git cherry-pick commit-id (github 上的短号)
- 【洛谷P2239 螺旋矩阵】
题目链接 直接看题 一看就很数学 我们不妨来画图 画出几个矩阵,找他们的关系 然后发现 当i==1时,对应的值就是j所对应的值: 当i==n时,所对应的值就是3*n-2-j+1: 当j==1时,所对应 ...
- 如何：执行大型 XML 文档的流式转换 大XML文件解析入库的一个方法
w Parsing Huge XML Files Incrementally http://pclib.github.io/safari/program/python-cookbook/Text/ch ...
- python进行数据库迁移的时候显示（TypeError: __init__() missing 1 required positional argument: 'on_delete'）
进行数据库迁移的时候,显示 TypeError: __init__() missing 1 required positional argument: 'on_delete' 图示: 出现原因: 在 ...
- MDX 入门
之前用到的SQL,解释:结构化查询语言(Structured Query Language)(发音:/ˈes kjuː ˈel/ "S-Q-L"),是一种特殊目的的编程语言,是一种 ...
- 测开之路九十：css的引用方式
第一种:内联,直接在标签里面加style属性,优先级别最高,但是不利于维护 第二种:页面嵌入,在head标签里面写一个style标签,以类选择器的形式写入,优先级别第二 第三种:外联,样式表链接,单独 ...
- 类HashSet
/* * Collection * * List * 有序(存储顺序和取出顺序一致),可以重复 * * Set * 无序(存储顺序和取出顺序不一致),唯一 * * */ import java.uti ...
- Java 与 C++ 的比较
参考 Java 中,一切皆是类 Java 中,所有数据或方法都要放在类中.如果想获得与全局函数等价的功能,可将static方法和static数据放在类里.而 C++ 中有 struct 结构.enum ...
- SoapUI常用的参数化方法
本篇文章来讲一下SoapUI在使用中常用的参数化方法字段参数化和使用DataSource调用Excel中的 数据给接口参数化,其中DataSource功能SoapUI开源版没有,大家可以使用破解版, ...
- vue-router路由如何实现传参
tip: 用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空.(传参强烈建议适用string) 也可以选用sessionstorage/lo ...