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最新技术(与图片背景相关)
Dec 24 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
HTML常用标签超详细整理
Mar 19 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语法速查表
2006/12/06 PHP
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
php解析json数据实例
2014/08/19 PHP
php数组键名技巧小结
2015/02/17 PHP
php实现cookie加密的方法
2015/03/10 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
标准化管理实施方案
2014/02/25 职场文书
节能减排倡议书
2014/04/15 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
教师调动申请报告
2015/05/18 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
oracle数据库去除重复数据
2022/05/20 Oracle