sticky-footer的三种解决方案
在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送，我们看到的效果就如下面两张图这样。这种效果基本是无处不在的，很受欢迎。
那么面对这样的问题有什么解决方法呢？首先我们先构建简单的代码
<body>
<div class="content"></div>
<div class="footer"></div>
</body>
其中content为我们的内容区。下面开始介绍解决方法。
一、为内容区域添加最小的高度
这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。例如我们可以添加如下样式：
.content{
min-height:calc(100vh-footer的高度);
box-sizing:border-box;
}
从而这个问题就解决了，但是如果页面的footer高度不同怎么办?每一个页面都要重新计算一次，这是很麻烦的，所以这种方法虽然简单但却是不推荐的。
二、使用flex布局
这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。
代码如下：
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.content {
flex:;
}
.footer{
flex:;
}
这样的布局简单使用，比较推荐。
三、在content的外面可以添加一个wrapper
这种方法就是在content的外面添加一个包裹容易，将html代码改成这样：
<body>
<div class="wrapper">
<div class="content"></div>
</div>
<div class="footer"></div>
</body>
然后添加以下样式：
html, body, .wrapper {
height: 100%;
}
body > .wrapper {
height: auto; min-height: 100%;
}
.content {
padding-bottom: 150px; /* 必须使用和footer相同的高度 */
}
.footer {
position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
clear:both;
}
另外，为了保证兼容性，需要在wrapper上添加clearfix类。其代码如下：
<body>
<div class="wrapper clearfix">
<div class="content"></div>
</div>
<div class="footer"></div>
</body>
.clearfix{
display: inline-block;
}
.clearfix:after {
content: ".";
display: block;
height:;
clear: both;
visibility: hidden;
}
ok,好，完成了，这种方法也比较推荐，但就是加入的代码比较多，也改变了html的文档结构。
sticky-footer的三种解决方案的更多相关文章
- 实现sticky footer的五种方法
2017-04-19 16:24:48 什么是sticky footer 如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送. 用position实现? 如果是用 ...
- asp.net core异步进行新增操作并且需要判断某些字段是否重复的三种解决方案
之前碰到asp.net core异步进行新增操作并且需要判断某些字段是否重复的问题,进行插入操作的话会导致数据库中插入重复的字段!下面把我的解决方法记录一下,如果对您有所帮助,欢迎拍砖! 场景:EFC ...
- C#实现多级子目录Zip压缩解压实例 NET4.6下的UTC时间转换 [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程 asp.net core异步进行新增操作并且需要判断某些字段是否重复的三种解决方案 .NET Core开发日志
C#实现多级子目录Zip压缩解压实例 参考 https://blog.csdn.net/lki_suidongdong/article/details/20942977 重点: 实现多级子目录的压缩, ...
- 关于Ubuntu 16.04中E: Could not get lock /var/lib/dpkg/lock - open的三种解决方案
问题 在Ubuntu中,有时候运用sudo apt-get install 安装软件时,会出现如下的情况: E: Could not get lock /var/lib/dpkg/lock - op ...
- 实验02——java两个数交换的三种解决方案
package cn.tedu.demo;/** * @author 赵瑞鑫 E-mail:1922250303@qq.com * @version 1.0* @创建时间:2020年7月16 ...
- Android 跨进程启动Activity黑屏（白屏）的三种解决方案
原文链接:http://www.cnblogs.com/feidu/p/8057012.html 当Android跨进程启动Activity时,过程界面很黑屏(白屏)短暂时间(几百毫秒?).当然从桌面 ...
- VS发布网站时，报错提示：“未能将文件xxx复制到xxx，未能找到文件xx”三种解决方案！
发布网站时候大家可能会遇到这样的情况,就是报错提示说:“未能将文件xxx复制到xxx,未能找到文件xx”,这个问题一般来说有三种解决方案,个人倾向第三种,如图: 解决方案如下: 方案一.把系统提示缺失 ...
- 记录一次MySQL两千万数据的大表优化解决过程，提供三种解决方案（转）
问题概述 使用阿里云rds for MySQL数据库(就是MySQL5.6版本),有个用户上网记录表6个月的数据量近2000万,保留最近一年的数据量达到4000万,查询速度极慢,日常卡死.严重影响业务 ...
- 一次MySQL两千万数据大表的优化过程，三种解决方案
问题概述 使用阿里云rds for MySQL数据库(就是MySQL5.6版本),有个用户上网记录表6个月的数据量近2000万,保留最近一年的数据量达到4000万,查询速度极慢,日常卡死.严重影响业务 ...
- Mybatis传多个参数(三种解决方案)
第一种方案 DAO层的函数方法 Public User selectUser(String name,String area); 对应的Mapper.xml <select id="s ...
随机推荐
- Windows Services(NT)
本文主要记录什么是Windows Service,及其主要组成?并通过一个列子来创建一个Windows Services,同时,记录几个在查资料碰到的问题. Windows Services全文简称N ...
- 本地MySQL的root所创建用户登录发生[Access denied for user 'root1'@'localhost' (using password: YES)]错误的解决方案
1.问题描述: 当在SQLyog中执行以下脚本: CREATE DATABASE IF NOT EXISTS sys; USE sys; CREATE USER root1 IDENTIFIED BY ...
- EditPlus配置GCC
--GCC Compile-- 命令:D:\GCC\MinGW_RP_Green\bin\gcc.exe 参数:$(FileName) -o $(FileNameNoExt).exe 初始目录:$(F ...
- USB基础知识概论（版本：v0.9.2）
源: USB基础知识概论
- li设置inline-block后，li左边出现空隙问题。
方法1:在ul设置font-size=0,然后再li再单独设置font-size 方法2:li连着写不要换行,也可以解决. <ul> <li>测试1</li>< ...
- Python文件读写、StringIO和BytesIO
1 IO的含义 在计算机中,IO是Input/Output的简写,也就是输入和输出. 由于程序和运行时数据是在内存中驻留,由CPU这个超快的计算核心来执行,涉及到数据交换的地方,通常是磁盘.网络等,就 ...
- 我是这样做APP的：击中用户的痛点（转）
击中用户的痛点 点评,感觉取名叫做“用户痛点的取舍”更加合适.很多公司.项目的失败完全取决于决策人取舍的失败,一味地追求大而全.迎合上级领导,专断而没有和团队做客观的分析.本文虽然以一个应该来说并不复 ...
- Excel vba map/dictionary
今天在调整一生成java代码的工具时,要用到在不同语言间互转数据类型的逻辑,原来的代码中根据excel记录的行号来计算,再到另外一个collection中获取,个人想着这也太土鳖了,于是搜了下,在vb ...
- 图片上传前 压缩，base64图片压缩 Exif.js处理ios拍照倒置等问题
曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...
- memory cache 和 disk cache
memory cache简介:MemoryCache顾名思义,就是将资源缓存到内存中,等待下次访问时不需要重新下载资源,而直接从内存中获取.Webkit早已支持memoryCache. 目前Webki ...