sticky footers布局

简介: sticky footers解决的问题是,当页面的内容不够长的时候,页脚块粘贴在视窗底部,如果内容足够长的话,页脚块会被内容向下推送。我现在介绍的是相对复杂,但是兼容性最好的方案首先看布局重点说一下cssdetail是最外层的包裹...

sticky footers解决的问题是,当页面的内容不够长的时候,页脚块粘贴在视窗底部,如果内容足够长的话,页脚块会被内容向下推送。

我现在介绍的是相对复杂,但是兼容性最好的方案

首先看布局

img_45ef0cde155bf57aa814392dbf529103.png

重点说一下css

detail是最外层的包裹元素,需要给元素固定定位,height、width都是100%;并且让多出来的元素可以滚动查看,所以添加overflow:auto属性,弹层一般都是有颜色的,所以添加背景颜色为rgba(7,17,27,0.5)

detail-wrapper跟detail-close是同一级元素,.detail-close不多说是关闭按钮的盒子为了在屏幕内容不满一屏的时候显示在最下边,需要给元素添加负margin-top;detail-wrapper是内容的盒子设置最小的高度是屏幕的高度即min-height:100%;

重点是detail-main的样式添加,padding-bottom,这个属性是必须的,为了让关闭按钮不遮挡内容;

具体css样式如下

img_b155e584c396079d8f690cc6e6b48f96.png

当内容未满一屏幕的时候的最终效果如下

img_f29968241605b6ee977a664f19fba4e4.png

当内容超过一屏幕之后的效果

img_40a7cb63703783d7968648f7758f6210.png

最后给大家推荐一个网站来更深一层的学习sticky footers布局https://www.w3cplus.com/css3/css-secrets/sticky-footers.html

补充:利用flex布局也可以实现同样的效果,代码如下


img_e63ea66ee0acbbd25513887944d6d752.png

感兴趣的话可以查看我的另一篇文章,flex实战

相关文章
|
10天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1210 5
|
9天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1171 87
|
8天前
|
机器学习/深度学习 物联网
Wan2.2再次开源数字人:Animate-14B!一键实现电影角色替换和动作驱动
今天,通义万相的视频生成模型又又又开源了!Wan2.2系列模型家族新增数字人成员Wan2.2-Animate-14B。
653 11
|
9天前
|
云栖大会
阿里云云栖大会2025年9月24日开启,免费申请大会门票,速度领取~
2025云栖大会将于9月24-26日举行,官网免费预约畅享票,审核后短信通知,持证件入场
1763 12
|
19天前
|
人工智能 运维 安全
|
2天前
|
资源调度
除了nrm-pm,还有哪些工具可以管理多个包管理器的源?
除了nrm-pm,还有哪些工具可以管理多个包管理器的源?
229 127
|
10天前
|
弹性计算 Kubernetes jenkins
如何在 ECS/EKS 集群中有效使用 Jenkins
本文探讨了如何将 Jenkins 与 AWS ECS 和 EKS 集群集成,以构建高效、灵活且具备自动扩缩容能力的 CI/CD 流水线,提升软件交付效率并优化资源成本。
362 0

热门文章

最新文章