CSS3 实现footer 固定在底部(无论页面多高始终在底部)


Posted in HTML / CSS onOctober 15, 2019

前言

把 footer 区固定在底部,无论页面高度多宽,它始终在底部不会变,就像移动端的菜单一样。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>document</title>

<!-- css -->
<style>
#demo{
 position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background-color: #eee;
    z-index: 9999;
}
</style>

</head>
<body>
<footer id="demo">我是footer</footer>
</body>
</html>

总结

以上所述是小编给大家介绍的CSS3 实现footer 固定在底部(无论页面多高始终在底部),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
详解Css3新特性应用之过渡与动画
Jan 10 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 #HTML / CSS
CSS3 @media的基本用法总结
Sep 10 #HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 #HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 #HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 #HTML / CSS
移动端适配 使px自动转换rem
Aug 26 #HTML / CSS
CSS3 毛玻璃效果
Aug 14 #HTML / CSS
You might like
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
语义化 H1 标签
2008/01/14 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
解释下面关于J2EE的名词
2013/11/15 面试题
自我评价个人范文
2013/12/16 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
学校春季防火方案
2014/06/08 职场文书
最美护士演讲稿
2014/08/27 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技