前端经典布局：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 ...
随机推荐
- ES6 对象超类
var parent = { foo() { console.log("Hello from the Parent"); } } var child = { foo() { sup ...
- native-echarts 组件封装
CommunalChart.js /** * 封装 图表组件 */ import React, { Component } from 'react'; import { StyleSheet, Tex ...
- Collector 源码分析
Collectors Collectors 配合 stream 可以实现 MapReduce 操作,也可以单独完成流中元素的收集. 收集器接口和实现 /** * 收集器接口 */ public int ...
- python3 -m pip install django， -m参数
python -m xxx.py 作用是:把xxx.py文件当做模块启动但是我一直不明白当做模块启动到底有什么用.python xxx.py和python -m xxx.py有什么区别! 自问自答: ...
- Jenkins获取运行job的用户名（在构建历史中展示构建人）
首先安装插件: jenkins>>manage jenkins>> manage plugins>>可选插件>>搜索并安装插件: user build ...
- 跟我学OpenResty(Nginx+Lua)开发目录贴 (转)
使用Nginx+Lua开发近一年的时间,学习和实践了一些Nginx+Lua开发的架构,为了让更多人使用Nginx+Lua架构开发,利用春节期间总结了一份基本的学习教程,希望对大家有用.也欢迎谈探讨学习 ...
- delphi SetWindowPos改变窗体位置和状态
http://blog.163.com/yuanliaofan@126/blog/static/1730690722012534428814/ delphi SetWindowPos改变窗体位置和状态 ...
- linux下安装php扩展的redis
bu要在网上顺便找个redis扩展,一是不安全,而是,别人的redis可能只能new,能连接,但是不保证是否能进行其他操作, 1.百度一下php redis扩展. 搜索到这个网址:http://pec ...
- hacker101教学笔记--introduction--the web in depth
hacker101笔记 提前准备:运行java的环境 burp proxy(代理) firefox(浏览器) xss 可以控制参数,发送JavaScript到服务器,再从服务器反映到浏览器上面< ...
- Nginx https服务器证书安装步骤
本文档指导您如何在 Nginx 服务器中安装 SSL 证书. 说明: 本文档以证书名称 www.domain.com 为例. Nginx 版本以 nginx/1.16.0 为例. 当前服务器的操作系统 ...