前端经典布局：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 ...
随机推荐
- Apache2.4常用编译参数
转载文章,亲试 Apache2.4以后的版本编译依赖apr,所以,编译之前需要先安装apr及apr-util. 编译参数只是一个参考作用,这个参数是我平常使用的,具体工作中的需求还是要区别对待的 一些 ...
- Rtmp AAC基本格式（转）
第一个audio data包:AAC sequence header 第二个audio data包:AAC raw AF表示的含义: 1)第一个字节af,a就是10代表的意思是AAC, Format ...
- WeekMap WeakSet的用途
1. WeekMap WeakSet有一个特性,就是加入其中的元素不会算入引用计数,所以当其他地方没有对对象的引用之后,就可以删除了,不会造成内存泄漏. WeekMap的一个用途是保存Dom节点引用, ...
- 非web工程，打jar放shell执行
作为6年经验的程序员,一直在搞web服务应用开发,今天领导被吐槽了,只会web方面的东东,最基本的打包啥啥都不会.. 一般开发工程都是web项目,突然要求开发非web,不用tomcat装(浪费端口号) ...
- web.xml 通过contextConfigLocation配置spring 的方式
部署到tomcat后,src目录下的配置文件会和class文件一样,自动copy到应用的 classes目录下 spring的 配置文件在启动时,加载的是web-info目录下的application ...
- Powershell 音乐播放
目录 目录 前言 systemwindowsmediamediaplayer 前言 Powershell抱着.NET的大腿,与生俱来了许多非常便捷的功能.例如--音乐的自动播放 system.wind ...
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_02 泛型_2_使用泛型的好处
用一个案例说明使用泛型和不是用泛型的区别 这里的ArrayList没写数据类型,不写就是默认Object 多态的弊端,不能使用子类特有的方法 向下转型,转换为String类型,才能使用length 不 ...
- mac, ios 模拟器
genymotion 最好的android 硬件模拟器. 可多开,可gps定位,可模拟重力系统,可模拟磁场系统,模拟器海拔高度. 甚至可以模拟sd卡. 直接就等于真机. virtualbox 最好的 ...
- Nginx基本属性配置
Nginx基本属性配置 1.找到安装目录下conf 文件下的nginx.conf文件 通过 Notepad++打开进行 属性配置 image ==> image 2.worker_pro ...
- git_03_git可视化工具github Desktop使用教程
前言 github desktop是github的桌面客户端,支持Windows和Mac OS版本.使用简单,可以查看.切换和创建分支,以及提交.合并或部署代码. 下载 由于电脑限制,这里以mac o ...