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 相关文章推荐
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
css3绘制天猫logo实现代码
Nov 06 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 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/06/06 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
vue模块移动组件的实现示例
2020/05/20 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
怎么快速自学python
2020/06/22 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
车间副主任岗位职责
2013/12/24 职场文书
中学生操行评语大全
2014/04/24 职场文书
工作推荐信范文
2014/05/10 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
介绍信如何写
2015/01/31 职场文书
高二语文教学反思
2016/02/16 职场文书
php 原生分页
2021/04/01 PHP