CSS粘住固定底部的5种方法
本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部。我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部时,下面要讲的布局就是解决如何使元素粘住浏览器底部。需求看下图:·
方法一:全局增加一个负值下边距等于底部高度
有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度。
<body>
<div class="wrapper"> content <div class="push"></div>
</div>
<footer class="footer"></footer>
</body>
CSS代码:
html, body {
height: 100%;
margin:;
}
.wrapper {
min-height: 100%; /* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
演示:

这个代码需要一个额外的元素.push等于底部的高度,来防止内容覆盖到底部的元素。这个push元素是智能的,它并没有占用到底部的利用,而是通过全局加了一个负边距来填充。
方法二:底部元素增加负值上边距
虽然这个代码减少了一个.push的元素,但还是需要增加多一层的元素包裹内容,并给他一个内边距使其等于底部的高度,防止内容覆盖到底部的内容。
HTML代码:
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
</body>
CSS:
html, body {
height: 100%;
margin:;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
演示:
方法三:使用calc()计算内容的高度
HTML :
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS:
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}
演示:
给70px而不是50px是为了为了跟底部隔开20px,防止紧靠在一起。
方法四:使用flexbox
关于flexbox的教程,还请查看之前的一篇详细的教程
HTML:
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex:;
}
演示:
方法五:使用grid布局
HTML:
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS:
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start:;
grid-row-end:;
}
演示:
grid早于flexbox出现,但并没有flexbox被广泛支持,你可能在chrome Canary或者Firefox开发版上才可以看见效果
CSS粘住固定底部的5种方法的更多相关文章
- [Android] Android 让UI控件固定于底部的几种方法
Android 让UI控件固定于底部的几种方法1.采用linearlayout布局:android:layout_height="0dp" <!-- 这里不能设置fill_p ...
- CSS实现导航条Tab的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- android 让一个控件按钮居于底部的几种方法
android 让一个控件按钮居于底部的几种方法1.采用linearlayout布局:android:layout_height="0dp" <!-- 这里不能设置fill_ ...
- Css三栏布局自适应实现几种方法
Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...
- [转]android 让一个控件按钮居于底部的几种方法
本文转自:http://www.cnblogs.com/zdz8207/archive/2012/12/13/2816906.html android 让一个控件按钮居于底部的几种方法 1.采用lin ...
- CSS + ul li 横向排列的两种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML中footer固定在页面底部的若干种方法
<div class="header"><div class="main"></div></div> <d ...
- css清除浮动大全,共8种方法
我看的网页的网址:http://hi.baidu.com/kongcheng2012/item/2b1250d4452e802538f6f705 为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效 ...
- css+div制作圆角矩形的四种方法
圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...
随机推荐
- 动态HTMl处理
后续爬虫代码的建议 尽量减少请求次数 1. 能抓列表页就不抓详情页 2. 保存获取的html页面,供差错和重复请求使用 关注网站的所有类型的页面 1. wap页面,触屏版页面 2. H5页面 3. A ...
- elk-Kibana设置登录认证-通过nginx转发(六)
一.kibana的登录认证问题 kibana是nodejs开发的,本身并没有任何安全限制,直接浏览url就能访问,如果公网环境非常不安全,可以通过nginx请求转发增加认证,方法如下: tips:ki ...
- python换行语法错误
a ={ ('住宅', 'https://auction.jd.com/getJudicatureList.html?callback=jQuery4392669&page=1&lim ...
- JQuery each遍历A标签获取href 和 里面指定的值
JQuery each遍历A标签获取href $('.scol_subject').each(function(){ var href = $(this).attr('href'); $(this). ...
- python中字符串格式化的四种方法
name = "huangemiling" age= 10 address = 'nanjing' print("My name is %s,age is %d,I co ...
- Newtonsoft.Json转换强类型DataTable错误:Self referencing loop detected with type ......
问题,在使用Newtonsoft.Json对强类型的DataTable进行系列化时会出现循环引用错误 解决办法,不要直接系列化强类型的DataTable,改为 JsonConvert.Serializ ...
- Golang数据类型总结及其转换
golang数据类型 基本类型:boolean,numeric,string类型的命名实例是预先声明的. 复合类型:array,struct,指针,function,interface,slice,m ...
- 执行git add .命令时报warning: LF will be replaced by CRLF in yarn.lock.
解决办法是执行:git config --global core.autocrlf false 是符号 / 转义的问题
- automapper demo
最近做项目,需要把DataTable中的数据强类型化.于是试用了下比较常用的AutoMapper,通过看代码中附带的Demo与网上的教程,也算能够勉强使用了,现将学习笔记记录如下: namespace ...
- java Timer 定时每天凌晨0点执行任务
import java.util.TimerTask; /** * 执行内容 * @author admin_Hzw * */ public class Task extends TimerTask ...