没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
2页
最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐 绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果: 当页面内容超出屏幕,页脚模块会像正常页面一样,被推到内容下方,需要拖动滚动条才能看到 而当页面内容小于屏幕高度,页脚模块会固定在屏幕底部,就像是底边距为零的固定定位 一、经典套路 这种套路的思路是,给内容区域设置 min-height: 100%,将 footer 推到屏幕下方 然后给 footer 添加 margin-top,其值为 footer 高度的负值,就能让 footer 回到屏幕底
资源详情
资源评论
资源推荐
详解详解Sticky Footer 绝对底部的两种套路绝对底部的两种套路
最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端
领域的良莠不齐
绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果:
当页面内容超出屏幕,页脚模块会像正常页面一样,被推到内容下方,需要拖动滚动条才能看到
而当页面内容小于屏幕高度,页脚模块会固定在屏幕底部,就像是底边距为零的固定定位
一、经典套路一、经典套路
这种套路的思路是,给内容区域设置 min-height: 100%,将 footer 推到屏幕下方
然后给 footer 添加 margin-top,其值为 footer 高度的负值,就能让 footer 回到屏幕底部
HTML:
<div class="wrap">
<div class="content">
<p>填充内容</p>
</div>
</div>
<div class="footer">
<p>这是页脚</p>
</div>
CSS:
html,body {
height: 100%;
}
weixin_38722607
- 粉丝: 5
- 资源: 865
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 使用 C 语言实现的计算非负整数的阶乘
- 2011-2021最新版本北京大学数字普惠金融指数(PKU-DFIIC).xlsx
- 县域数字乡村指数2018-2020(1).xlsx
- Docker容器配置进阶
- tensorflow-gpu-2.7.4-cp37-cp37m-manylinux2010-x86-64.whl
- 多段线、 圆、弧转多段线(仅我可见)
- tensorflow-2.7.2-cp38-cp38-manylinux2010-x86-64.whl
- 李慧琴C语言基础部分.zip
- yeyue-p8Yi4-ve4a83792.apk
- tensorflow-gpu-2.7.3-cp38-cp38-manylinux2010-x86-64.whl
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0