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实战

相关文章
|
12天前
|
移动开发 前端开发 JavaScript
uView Sticky 吸顶
uView Sticky 吸顶
27 0
|
7天前
|
开发者
【干货分享】Grid 布局和 Flex 布局
【干货分享】Grid 布局和 Flex 布局
|
3月前
|
前端开发 开发者 容器
CSS布局模式之Flex布局&Grid布局(二)
CSS布局模式之Flex布局&Grid布局
|
3月前
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局(三)
CSS布局模式之Flex布局&Grid布局
|
3月前
|
前端开发 开发者 UED
CSS布局模式之Flex布局&Grid布局(一)
CSS布局模式之Flex布局&Grid布局
|
6月前
|
XML Android开发 数据格式
一个Adapter+recycleview实现多种布局,区分布局中
最近因为需要所以学习了一下recycleview,使用Adapter修饰器修饰,使用一个Adapter+recycleview实现多种布局,而不是之前的三个Adapter在同一个recycleview中实现三个布局。点击区分布局中的gridview的图片和姓名。
31 0
uiu
|
前端开发 安全 容器
W3C推荐的新布局模式 【CSS Flex布局】详解
W3C推荐的新布局模式 【CSS Flex布局】详解
uiu
210 0
W3C推荐的新布局模式 【CSS Flex布局】详解
|
前端开发
css3新属性position: sticky 一分钟实现 导航栏悬停功能
想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如csdn网站: 那么你们都是使用什么方法实现的呢?今天我们就用css3的一个新的属性position: sticky 来实现这个功能吧,坚持看下去,就只需一分钟就能搞定。
348 0
css3新属性position: sticky 一分钟实现 导航栏悬停功能
|
JavaScript 前端开发
rem 布局原理
rem 布局原理
222 0
rem 布局原理
|
前端开发
Sticky footers
Sticky footers
144 0
Sticky footers