CSS粘住固定底部的5种方法
本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部。我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部时,下面要讲的布局就是解决如何使元素粘住浏览器底部。需求看下图:·
方法一:全局增加一个负值下边距等于底部高度
有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度。
1 <body> 2 <divclass="wrapper"> 3 4 content5 6 <divclass="push"></div> 7 </div> 8 <footerclass="footer"></footer> 9 </body>
CSS代码:
1 html, body{ 2 height:100%; 3 margin:0; 4 } 5 .wrapper{ 6 min-height:100%; 7 8 /*Equal to height of footer*/ 9 /*But also accounting for potential margin-bottom of last child*/ 10 margin-bottom:-50px; 11 } 12 .footer,13 .push{ 14 height:50px; 15 }
演示:
1 html, body{ 2 height:100%; 3 margin:0; 4 } 5 .content{ 6 min-height:100%; 7 } 8 .content-inside{ 9 padding:20px; 10 padding-bottom:50px; 11 } 12 .footer{ 13 height:50px; 14 margin-top:-50px; 15 }
演示:
方法三:使用calc()计算内容的高度
HTML :
1 <body> 2 <divclass="content"> 3 content4 </div> 5 <footerclass="footer"></footer> 6 </body>
CSS:
1 .content{ 2 min-height:calc(100vh - 70px); 3 } 4 .footer{ 5 height:50px; 6 }
演示:
给70px而不是50px是为了为了跟底部隔开20px,防止紧靠在一起。
方法四:使用flexbox
关于flexbox的教程,还请查看之前的一篇详细的教程
HTML:
1 <body> 2 <divclass="content"> 3 content4 </div> 5 <footerclass="footer"></footer> 6 </body>
CSS:
1 html{ 2 height:100%; 3 } 4 body{ 5 min-height:100%; 6 display:flex; 7 flex-direction:column; 8 } 9 .content{ 10 flex:1; 11 }
演示:
方法五:使用grid布局
HTML:
1 <body> 2 <divclass="content"> 3 content4 </div> 5 <footerclass="footer"></footer> 6 </body>
CSS:
1 html{ 2 height:100%; 3 } 4 body{ 5 min-height:100%; 6 display:grid; 7 grid-template-rows:1fr auto; 8 } 9 .footer{ 10 grid-row-start:2; 11 grid-row-end:3; 12 }
演示:
grid早于flexbox出现,但并没有flexbox被广泛支持,你可能在chrome Canary或者Firefox开发版上才可以看见效果
转载于:https://www.cnblogs.com/qcxc/p/6868438.html
CSS粘住固定底部的5种方法相关推荐
- html如何使图片紧靠下方,CSS粘住固定底部的5种方法
本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器 ...
- css固定底部的五种方法
本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器 ...
- footer属性css,CSS基础-footer元素始终粘在浏览器底部的四种方法
本文介绍底部footer元素如何始终粘在浏览器底部.当内容container足够多.可以撑开一屏的时候,底部footer紧跟在内容container后边:而内容container不够多.不足以撑开一屏 ...
- CSS粘住底部的5种方法
CSS粘住底部的5种方法 文章目录 方法一:全局增加一个负值下边距等于底部高度 方法二:底部元素增加负值上边距 方法三:使用calc()计算内容的高度 方法四:使用flexbox 方法五:使用grid ...
- css清除浮动大全,共8种方法。
本文转载自:http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果 ...
- 2000-2020全要素生产率OP法+LP法+OLS和固定效应法三种方法合集含原始数据和计算过程Stata代码
2000-2020全要素生产率OP法+LP法+OLS和固定效应法三种方法合集含原始数据和计算过程Stata代码 1.时间:OP法:2008-2020年.LP法2000-2020年.OLS和固定效应法2 ...
- 【转载】让DIV的滚动条自动滚动到最底部的3种方法
转载自:脚本之家 → 网络编程 → JavaScript → javascript技巧 → 让DIV的滚动条自动滚动到最底部的3种方法(推荐) http://www.jb51.net/article ...
- php实现一行省略号,css实现文字溢出省略号的四种方法(附代码)
本篇文章给大家带来的内容是关于css实现文字溢出省略号的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在项目中有涉及实现一行或者第几行后加省略号,在实现第几行后加 ...
- html按钮disabled状态,CSS定义input disabled样式的三种方法
表单提交的时候我们经常会让提交按钮禁用,满足条件后按钮恢复,disabled禁用按钮后怎么用CSS来改变禁用disabled按钮的样式呢?下面看青岛星网:CSS定义input disabled样式的三 ...
最新文章
- Web前端开发人员和设计师必读文章推荐【系列七】
- 快速入门系列--MVC--03控制器和IOC应用
- css expressionr,CSS自定义属性expression_r
- 完美解决Centos不能ping百度的问题
- SAP Spartacus CurrentProductService.getProduct方法的实现原理
- table表头固定4种方法_移动式、半移动式、半固定式、固定式4种破碎站详细介绍及优缺点对比...
- Concepts in Games Development(游戏开发概述) 公开课笔记
- 拓端tecdat|R语言ggmap空间可视化机动车交通事故地图
- elastix中NAT穿越问题解决办法
- AFNetwork 作用和使用方法具体解释
- html中如何淡化背景图片,如何去除图片背景?
- MySQL中临时表(TEMPORARY)
- 记:《洛克菲勒留给儿子的38封信》-- 8
- JAVA实现纳税算法
- php防止恶意注册,PHP怎样防止用户注册高仿其他人的用户名?
- Latex中处理中文
- 教你判断一个APP页面是原生的还是H5页面
- 用 Java 生成和识别二维码就这么简单
- Reality Labs首次向媒体开放,空间音频、EMG腕带体验大公开
- 61850(CMS)
热门文章
- 代码结构中 Dao,Service,Controller,Util,Model 是什么意思,为什么划分?
- Elasticsearch索引生命周期管理方案
- 程序员必备网站之一:No Design
- 重塑云上的 Java 语言
- 保研夏令营的个人陈述怎么写?
- 机器学习中的L1与L2正则化图解!
- 3分钟看完一篇论文,这个AI文本生成模型把今年NeurIPS 2300+篇总结了个遍
- 13个你一定要知道的PyTorch特性
- 我们常称自己“码农”,这次已得到官方认定:“新生代农民工!
- 命令行的艺术 (GitHub 星标 6 万多)