本文主要介绍一个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种方法的更多相关文章

  1. [Android] Android 让UI控件固定于底部的几种方法

    Android 让UI控件固定于底部的几种方法1.采用linearlayout布局:android:layout_height="0dp" <!-- 这里不能设置fill_p ...

  2. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  3. android 让一个控件按钮居于底部的几种方法

    android 让一个控件按钮居于底部的几种方法1.采用linearlayout布局:android:layout_height="0dp" <!-- 这里不能设置fill_ ...

  4. Css三栏布局自适应实现几种方法

    Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

  5. [转]android 让一个控件按钮居于底部的几种方法

    本文转自:http://www.cnblogs.com/zdz8207/archive/2012/12/13/2816906.html android 让一个控件按钮居于底部的几种方法 1.采用lin ...

  6. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. HTML中footer固定在页面底部的若干种方法

    <div class="header"><div class="main"></div></div> <d ...

  8. css清除浮动大全,共8种方法

    我看的网页的网址:http://hi.baidu.com/kongcheng2012/item/2b1250d4452e802538f6f705 为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效 ...

  9. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

随机推荐

  1. 动态HTMl处理

    后续爬虫代码的建议 尽量减少请求次数 1. 能抓列表页就不抓详情页 2. 保存获取的html页面,供差错和重复请求使用 关注网站的所有类型的页面 1. wap页面,触屏版页面 2. H5页面 3. A ...

  2. elk-Kibana设置登录认证-通过nginx转发(六)

    一.kibana的登录认证问题 kibana是nodejs开发的,本身并没有任何安全限制,直接浏览url就能访问,如果公网环境非常不安全,可以通过nginx请求转发增加认证,方法如下: tips:ki ...

  3. python换行语法错误

    a ={ ('住宅', 'https://auction.jd.com/getJudicatureList.html?callback=jQuery4392669&page=1&lim ...

  4. JQuery each遍历A标签获取href 和 里面指定的值

    JQuery each遍历A标签获取href $('.scol_subject').each(function(){ var href = $(this).attr('href'); $(this). ...

  5. python中字符串格式化的四种方法

    name = "huangemiling" age= 10 address = 'nanjing' print("My name is %s,age is %d,I co ...

  6. Newtonsoft.Json转换强类型DataTable错误:Self referencing loop detected with type ......

    问题,在使用Newtonsoft.Json对强类型的DataTable进行系列化时会出现循环引用错误 解决办法,不要直接系列化强类型的DataTable,改为 JsonConvert.Serializ ...

  7. Golang数据类型总结及其转换

    golang数据类型 基本类型:boolean,numeric,string类型的命名实例是预先声明的. 复合类型:array,struct,指针,function,interface,slice,m ...

  8. 执行git add .命令时报warning: LF will be replaced by CRLF in yarn.lock.

    解决办法是执行:git config --global core.autocrlf false 是符号 / 转义的问题

  9. automapper demo

    最近做项目,需要把DataTable中的数据强类型化.于是试用了下比较常用的AutoMapper,通过看代码中附带的Demo与网上的教程,也算能够勉强使用了,现将学习笔记记录如下: namespace ...

  10. java Timer 定时每天凌晨0点执行任务

    import java.util.TimerTask; /** * 执行内容 * @author admin_Hzw * */ public class Task extends TimerTask ...