具体实例页面请看github

方法一：footer绝对定位-并加一层父元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;box-sizing: border-box;}html,body{height: 100%;/*min-height: 100%;*/min-width: 1200px;}body{font: 14px/1.5 "Microsoft YaHei", sans-serif;color: #666666;background: #e8e8e8;}.body{position: relative;min-height: 100%;height:auto !important;height:100%;//IE6不识别min-height}.header{width: 100%;background-color: #f1a899;height: 64px;box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0 transparent;}.section{width: 1200px;margin: 0 auto;padding: 30px 0 145px;}.container{background: #ffffff;height:500px;}.footer{position: absolute;bottom: 0;height: 95px;width: 100%;background: #858B9A;}</style>
</head>
<body>
<div class="body"><div class="header">header页面头部</div><div class="section"><div class="container">页面主体内容</div></div><div class="footer">footer页面底部</div>
</div>
</body>
</html>

方法二：foote绝对定位-以body为父元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;box-sizing: border-box;}html{height: 100%;min-height: 100%;min-width: 1200px;}body{position: relative;font: 14px/1.5 "Microsoft YaHei", sans-serif;color: #666666;background: #e8e8e8;min-height:100%;}.header{width: 100%;background-color: #f1a899;height: 64px;box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0 transparent;}.section{width: 1200px;margin: 0 auto;padding: 40px 0 140px;}.container{background: #ffffff;height:500px;}.footer{position: absolute;bottom: 0;height: 95px;width: 100%;background: #858B9A;}</style>
</head>
<body><div class="header">header页面头部</div><div class="section"><div class="container">页面主体内容</div></div><div class="footer">footer页面底部</div>
</body>
</html>

方法三：footer加负值上边距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}html, body {height: 100%;min-height: 100%;min-width: 1200px;}body {font: 14px/1.5 "Microsoft YaHei", sans-serif;color: #666666;background: #e8e8e8;}.header {width: 100%;background-color: #f1a899;height: 64px;box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0 transparent;}.section {min-height: 100%;padding: 0 0 95px;}.container {width: 1200px;height: 500px;margin: 30px auto;background: #ffffff;}.footer {height: 95px;margin-top: -95px;width: 100%;background: #858B9A;}</style>
</head>
<body><div class="section"><div class="header">header页面头部</div><div class="container">页面主体内容</div>
</div><div class="footer">footer页面底部
</div>
</body>
</html>

方法四：给section的高度用calc(100vh-footer.height)

calc()：是css3新增方法，pc端大部分支持ie9+，移动端大部分不支持
vh单位：相对于视窗的高度，视窗的高度是100vh

方法四用calc()函数算出高度，内容较少，小屏幕下如果出现横向滚动条，会影响纵向滚动条

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}html, body {height: 100%;/*min-height: 100%;*/min-width: 1200px;}body {font: 14px/1.5 "Microsoft YaHei", sans-serif;color: #666666;background: #e8e8e8;}.header {width: 100%;background-color: #f1a899;height: 64px;box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0 transparent;}.section {min-height: calc(100vh - 95px);}.container {width: 1200px;height: 500px;margin: 0 auto;background: #ffffff;}.footer {height: 95px;width: 100%;background: #858B9A;}</style>
</head>
<body><div class="section"><div class="header">header页面头部</div><div class="container">页面主体内容</div>
</div>
<div class="footer">footer页面底部
</div>
</body>
</html>

方法五：用flexbox

flexbox对ie支持不太好

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}html {height: 100%;min-width: 1200px;}body {font: 14px/1.5 "Microsoft YaHei", sans-serif;color: #666666;background: #e8e8e8;min-height: 100%;display: flex;flex-direction: column;}.header {width: 100%;background-color: #f1a899;height: 64px;box-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 4px 8px #DFDFDF, 0 0 0 transparent;}.section {flex:1;padding:30px 0;}.container {width: 1200px;height: 1000px;margin: 0 auto;background: #ffffff;}.footer {height: 95px;width: 100%;background: #858B9A;}</style>
</head>
<body>
<div class="header">header页面头部
</div>
<div class="section"><div class="container">页面主体内容</div>
</div>
<div class="footer">footer页面底部
</div>
</body>
</html>

Sticky Footer 粘性底部-让底部一直在页面最下面相关推荐

  1. css中底部sticky footer

    Sticky footers设计是最古老和最常见的效果之一,它可以概括如下: 1 如果页面内容不够长的时候,页脚块粘贴在视窗底部: 2 如果内容足够长时,页脚块会被内容向下推送. 出现问题如图: 方法 ...

  2. 【转贴】CSS Sticky Footer: 完美的CSS绝对底部

    原贴地址:http://parandroid.com/css-sticky-footer/ 在帕兰映像中看到一篇好文,将它转贴到这儿. CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在C ...

  3. CSS绝对底部布局 Sticky footer

    何为Sticky footer布局?   我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内 ...

  4. 如何将footer标签固定在底部_如何将页脚固定在页面底部(多种方法实现)

    作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...

  5. 如何将footer标签固定在底部_div footer标签css实现位于页面底部固定

    作为一个页面仔你一定遇到过:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看 ...

  6. 如何将footer标签固定在底部_如何让网页的footer一直固定在底端

    我们在开发网站的时候一般都会分header.main.side.footer.这些模块分别包含了各自公用的信息,比如header一般都是本网站所有页面需要引入的模块,里面一般都是放置菜单等信息:而fo ...

  7. 8个有用的 CSS 技巧:视差图像，sticky footer 等等

    译者:前端小智 原文:https://medium.com/@bretcameron/parallax-images-sticky-footers-and-more-8-useful-css-tric ...

  8. html footer 布局,详解CSS经典布局之Sticky footer布局

    何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内容区 ...

  9. vue动画效果配置和弹层css sticky footer

    vue动画效果配置 有两种方式: 一种是css方式 需要注意 4 个(CSS)类名在 enter/leave 的过渡中切换: v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移 ...

最新文章

  1. bash 运行程序 下一步_怎样用 Bash 编程：语法和工具
  2. 带你从源码角度分析ViewGroup中事件分发流程
  3. python与excel做数据可视化-python数据可视化怎么做?excel可视化图表制作?
  4. php简介及其发展,PHP 简介
  5. jvm初体验：堆溢出处理
  6. 密码学加解密实训(墨者学院摩斯密码第2题)
  7. 免校准的电量计量芯片_电能计量芯片应用心得之选型篇
  8. DeepL Pro（deepl翻译器）官方中文版V2.2.0 | 翻译软件哪个好用 | 翻译软件排行榜前十的神器
  9. 2020-11-10 oracle 数据库sql 之decode函数
  10. javaweb开发后端常用技术_java web后端开发技术
  11. MySQL联合创始人向Sun递交辞呈
  12. Allegro铜皮倒角技巧-shape倒角
  13. UDS中数据的存储（FLASH/EEPROM/RAM）
  14. c语言信用卡号验证,Javascript验证Visa和MasterCard信用卡号的方法
  15. pandoc提取word中的图片
  16. SQL Server研习录（08）——LEFT()函数
  17. ipad mini 4：ipad is disabled connect to iTunes
  18. 计算机为什么能做翻译,为什么计算机能翻译
  19. Java--Mac系统安装JDK1.8及环境变量配置
  20. 简单几步让iOS提醒事项和Micosoft To Do同步

热门文章

  1. 取消c++所设置的cout中setprecision输出的格式
  2. 【自动化测试】在做自动化测试之前你需要知道的
  3. Java任务调度框架Quartz教程实例
  4. SpringMvc Eclipse搭建web项目
  5. Java 读写txt文件 中文乱码问题
  6. 如何聊离职原因，向面试官展示自己的忠诚
  7. MySQL多线程并发调优
  8. DispatcherServlet与初始化主线
  9. SaaS市场没有免费午餐！未来只有两种企业可生存
  10. POJ 2991 Crane（线段树+计算几何）