css sticky footer布局
2024-10-15 17:49:14
Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。
套路为：内容层和页脚层
1.内容层需要有一个外层wrapper 并且清除浮动，需要设置min-height: 100% 使之撑满整个屏幕 --->detail-wrapper
2.外层wrapper里面的内容detail-main，需要设置paddding-bottom把页脚层的位置留出来，让页脚不会覆盖内容
3.页脚的内容detail-close需要设置margin: -64px auto 0 auto 来防止detail-wrappe内容充满整个屏幕，并且设置clear:both清除浮动
<div class="detail-wrapper clearfix">
<div class="detail-main"></div>
</div>
<div class="detail-close" @click="closeDetail">
<i class="icon-close"></i>
</div>
最新文章
- 探索摸寻之XCode 快捷键
- asp.net和js读取文件的MD5值的方法
- Struts2、Spring MVC4 框架下的ajax统一异常处理
- android 中通过代码创建控件
- CodeIgniter 3.0+ 部署linux环境 session报错
- Asp.net笔记(原创)
- Dining
- 分页SQL技术1-COUNT STOPKEY.
- SQL查询最近三个月的数据（查询最近几天，几年等等）
- 使用iscroll插件实现下拉刷新功能
- 转载ECTouch1.0 修改后台广告管理中广告列表显示广告图片
- LeetCode OJ 113. Path Sum II
- jq基础
- R语言重要数据集分析研究——  数据集本身的分析技巧
- 记一次在咸鱼上购买 MacBook Pro 的经历
- C# int.ToString() 常用参数说明
- Round 1 Over
- Grunt学习一:使用grunt创建jquery plugin.
- LAMP环境配置踩坑2外网无法访问
- Java实现进程调度算法(一) FCFS(先来先服务)