CSS 五种方式实现 Footer 置底

 

页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部。

当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部; 但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。

方法一:将内容部分的margin-bottom设为负数

<div class="wrapper">
<!-- content -->
<div class="push"></div>
</div>
<div class="footer">footer</div>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px; /* 等于footer的高度 */
}
.footer, .push {
height: 50px;
}
  1. 这个方法需要容器里有额外的占位元素(div.push)。

  2. div.wrappermargin-bottom需要和div.footer-height值一样,注意是负height

方法二:将页脚的margin-top设为负数

  • 给内容外增加父元素,并让内容部分的padding-bottom与页脚的height相等。
<div class="content">
<div class="content-inside">
<!-- content -->
</div>
</div>
<div class="footer">footer</div>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}

方法三:使用calc()设置内容高度

<div class="content">
<!-- content -->
</div>
<div class="footer">footer</div>
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}
  • 这里假设div.contentdiv.footer之间有20px的间距,所以70px=50px+20px

方法四:使用flexbox弹性盒布局

以上三种方法的footer高度都是固定的,如果footer的内容太多则可能会破坏布局。

<div class="content">
<!-- content -->
</div>
<div class="footer">footer</div>
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}

方法五:使用Grid网格布局

<div class="content">
<!-- content -->
</div>
<div class="footer">footer</div>
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}

CSS 五种方式实现 Footer 置底的更多相关文章

  1. CSS五种方式实现 Footer 置底

    页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部.当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部:但如果网页内容不够长,置底的页脚就会保 ...

  2. jmeter关联的五种方式

    [脚本准备] 这里,我们用dummy取样器来模拟服务器的返回,通过关联获取name的值,然后接口取这个name的值,这就我们就简单模拟了请求间的依赖关系 在取样器中添加dummy取样器 搜索的关键字是 ...

  3. 五种方式让你在java中读取properties文件内容不再是难题

    一.背景 最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供java程序动态的读取,修改变量,不再需要修改代码的问题.就借此机会把Spring+SpringMVC ...

  4. Android_安卓为按钮控件绑定事件的五种方式

    一.写在最前面 本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现 第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...

  5. javaScript中定义类或对象的五种方式

    第一种方式: 工厂方法 能创建并返回特定类型的对象的工厂函数(factory function). function createCar(sColor){ var oTempCar = new Obj ...

  6. Spring事务配置的五种方式(转载)

    Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSo ...

  7. Spring事务配置的五种方式

    Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSo ...

  8. Android数据存储五种方式总结

    本文介绍Android平台进行数据存储的五大方式,分别如下: 1 使用SharedPreferences存储数据     2 文件存储数据       3 SQLite数据库存储数据 4 使用Cont ...

  9. Mysql查看版本号的五种方式介绍

    Mysql查看版本号的五种方式介绍 作者: 字体:[增加 减小] 类型:转载 时间:2013-05-03   一.使用命令行模式进入mysql会看到最开始的提示符;二.命令行中使用status可以看到 ...

随机推荐

  1. 二十六、MySQL 临时表

    MySQL 临时表 MySQL 临时表在我们需要保存一些临时数据时是非常有用的.临时表只在当前连接可见,当关闭连接时,Mysql会自动删除表并释放所有空间. 临时表在MySQL 3.23版本中添加,如 ...

  2. 六、MySQL 删除数据库

    MySQL 删除数据库 使用普通用户登陆 MySQL 服务器,你可能需要特定的权限来创建或者删除 MySQL 数据库,所以我们这边使用 root 用户登录,root 用户拥有最高权限. 在删除数据库过 ...

  3. Vue 使用History记录上一页面的数据

    UI Mvvm 前端数据流框架精讲 Vue数据双向绑定探究 面试问题:Vuejs如何实现双向绑定 数据双向绑定的探究和实现 需求 从列表页的第二页进入详情页,返回时列表页仍然显示在第二页: 从列表页的 ...

  4. JZOJ 3462. 【NOIP2013模拟联考5】休息(rest)

    3462. [NOIP2013模拟联考5]休息(rest) (Standard IO) Time Limits: 1000 ms  Memory Limits: 262144 KB  Detailed ...

  5. CodeForces:#448 div2 B. XK Segments

    传送门:http://codeforces.com/contest/895/problem/B B. XK Segments time limit per test1 second memory li ...

  6. IOS开发学习笔记015-block和protocol

    一.block block 代码段    标识是 ^    block 和函数很像 1.可以保存代码 2.有返回值 3.有形参 格式 返回值 (block名)(形参列表) = ^(形参列表) {代码段 ...

  7. Mac教程macOS教程 苹果电脑教程

    第1 章 初识MacOS 01 菜单栏 02 键盘 03 聚焦(Spotlight)

  8. 并发编程——多进程——multiprocessing开启进程的方式及其属性(3)

    开启进程的两种方式——Process 方式一:函数方法 from multiprocessing import Process import time def task(name): print('% ...

  9. Redis的 SORT命令

      SORT key [BY pattern] [LIMIT offset count] [GET pattern [GET pattern ...]] [ASC | DESC] [ALPHA] [S ...

  10. python IDLE简介及使用技巧

    前言:本人环境windows 7 64位,python2.7 IDLE简介: 是python 的可视化GUI编辑器 可以逐行输入命令 可方便的进行复制.粘贴等操作 常用命令行命令: import mo ...