两种方式实现sticky footer绝对底部
一、什么是sticky footer
如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送，我们看到的效果就如下面两张图这样。这种效果基本是无处不在的，很受欢迎。
二、第一种方式，利用margin和padding实现
先看效果
下面是代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>margin，padding实现sticky footer</title>
<style>
html, body, p {
padding: 0;
margin: 0;
height: 100%;
} body {
min-height: 100%;
} #wrapper {
min-height: 100%;
background: yellow;
} #content {
padding-bottom: 50px;
vertical-align: center; }
#text-content{
height: 500px;
}
#footer {
margin-top: -50px;
height: 50px;
background: wheat;
}
</style> </head>
<body>
<div id="wrapper">
<div id="content">
<div id="text-content">填充内容11111111111111</div>
</div>
</div>
<div id="footer">底部内容</div>
</body>
</html>
可以尝试下在text-content中添加内容，可以发现，底部footer是不会受到影响的，坚挺的固定在底部。
这种套路的思路是，给内容区域设置 min-height: 100%，将 footer 推到屏幕下方
然后给 footer 添加 margin-top，其值为 footer 高度的负值，就能让 footer 回到屏幕底部
需要注意的就是内容区域 content 的 padding、footer 的 height 和 margin， 必须保持一致
这种写法的兼容性非常好，实测 IE7 也能正常展示
但是如果页面的主体布局有其他兼容性问题，Sticky Footer 就需要做一些相应的修改
三、第三种方式，使用flex
代码如下，没有添加兼容性前缀
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>flex Sticky footer</title>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
} body {
min-height: 100%;
display: flex;
flex-direction: column;
} #header {
line-height: 50px;
background: wheat;
} #content {
flex: 1;
background: yellow;
} #text-content {
height: 600px;
} #footer {
line-height: 50px;
background: wheat;
}
</style> </head>
<body>
<div id="header">顶部</div>
<div id="content">
<div id="text-content">aasdasd</div> </div>
<div id="footer">底部</div>
</body>
</html>
这种方法就是利用flex布局对视窗高度进行分割。
footer的flex设为0，这样footer获得其固有的高度;
content的flex设为1，这样它会充满除去footer的其他部分。
两种方式实现sticky footer绝对底部的更多相关文章
- Android ScrollView监听滑动到顶部和底部的两种方式（你可能不知道的细节）
Android ScrollView监听滑动到顶部和底部,虽然网上很多资料都有说,但是不全,而且有些细节没说清楚 使用场景: 1. 做一些复杂动画的时候,需要动态判断当前的ScrollView是否滚动 ...
- .NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格
一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...
- Log4Net日志记录两种方式
简介 log4net库是Apache log4j框架在Microsoft .NET平台的实现,是一个帮助程序员将日志信息输出到各种目标(控制台.文件.数据库等)的工具. log4net是Ap ...
- React组件导入的两种方式(动态导入组件的实现)
一. react组件两种导入方式 React组件可以通过两种方式导入另一个组件 import(常用) import component from './component' require const ...
- Struts2实现ajax的两种方式
基于Struts2框架下实现Ajax有两种方式,第一种是原声的方式,另外一种是struts2自带的一个插件. js部分调用方式是一样的: JS代码: function testAjax() { var ...
- CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking)
CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking) 我在(Modern OpenGL用Shader拾取 ...
- 两种方式实现java生成Excel
Web应用中难免会遇到需要将数据导出并生成excel文件的需求.同样,对于本博客中的总结,也是建立在为了完成这样的一个需求,才开始去了解其实现形式,并且顺利完成需求的开发,先将实现过程总结于此.本博文 ...
- 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入
在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...
- （转）SqlServer 数据库同步的两种方式 (发布、订阅)，主从数据库之间的同步
最近在琢磨主从数据库之间的同步,公司正好也需要,在园子里找了一下,看到这篇博文比较详细,比较简单,本人亲自按步骤来过,现在分享给大家. 在这里要提醒大家的是(为了更好的理解,以下是本人自己理解,如有错 ...
随机推荐
- IOC 概念
转摘:https://www.cnblogs.com/DebugLZQ/archive/2013/06/05/3107957.html 博文目录 1.IOC的理论背景 2.什么是IOC 3.IOC也叫 ...
- 神奇的Kivy，让Python快速开发移动app
随着移动互联网的不断发展,手机.Pad等移动终端已经被普遍使用,充斥在人们的工作.学习和生活中,越来越多的程序都转向移动终端,各类app应用相拥而至. Kivy作为Python的Android和IOS ...
- 2018版移动端ui规范
计规范是一种将移动端常用控件标准化.统一化的的文档 今天整理了一篇设计规范的文章概论,讲诉中会以ios做介绍,安卓由于开源,平台相对教多不做单一阐述,实际操作的时候,我们不管是做一代还是二次的迭代产品 ...
- ubuntu(Linux)下，查看CPU性能集合
CPU: 详细:cat /proc/cpuinfo型号:grep "model name" /proc/cpuinfo |awk -F ':' '{print $NF}'数量:ls ...
- caddy配置php-fpm
特码的,谷歌又用不了了. 吐槽完毕,正文如下: caddy是一个用go语言开发的服务器,可用作web端. caddy本身支持 -conf caddyfile的配置 在命令行中的体现: caddy -c ...
- gin请求数据校验
前言 最近优化gin+vue的前后端分离项目代码时候,发现代码中对请求数据的校验比较繁琐,于是想办法简化它.最终我发现了go-playground/validator开源库很好用. 优化前代码 代码如 ...
- 2019-2020-1 20199329 第二周测试（环境：ubuntu64位）
2019-2020-1 20199329 第二周测试(环境:ubuntu64位) 实验一 0.每个.c一个文件,每个.h一个文件,文件名中最好有自己的学号 1.用Vi输入图中代码,并用gcc编译通过 ...
- Linux系统进入救援模式
由于现在很多的服务器都是用的RedHat,CentOS也比较多,这里就介绍CentOS6.6的救援模式. 有很多人的linux在用的时候不小心修改了某个权限,导致系统启动不起来,下面我就来为大家解决一 ...
- 反向代理负载均衡之nginx
一.集群 1.1 什么是集群 集群是一组相互独立的.通过高速网络互联的计算机,它们构成了一个组,并以单一系统的模式加以管理.一个客户与集群相互作用时,集群像是一个独立的服务器.集群配置是用于提高可用性 ...
- NPM 私有仓库的搭建
NPM 私有仓库的搭建 为什么搭建私有仓库 balabala,当然是有需求的时候嘛 搭建流程 介绍和安装verdaccio 备注: 程序启动后,配置文件为/home/work/.config/verd ...