sticky-footer实现记录

sticky-footer是css中的一个经典问题：
当页面内容超出屏幕，页脚模块会像正常页面一样，被推到内容下方，需要拖动滚动条才能看到。
而当页面内容小于屏幕高度，页脚模块会固定在屏幕底部，就像是底边距为零的固定定位。

html:

<div class="detailWrapper" v-show="detailShow"><div class="sticky-box clearfix"><div class="sticky-content">内容</div></div><div class="sticky-footer"><span class="icon-close" @click="showDetail"></span></div></div>

css:

.detailWrapperposition fixedz-index: 1top 0left 0width 100%height 100%background rgba(7,7,27,0.8)overflow auto.sticky-boxwidth 100%min-height 100%.sticky-contentmargin-top 64pxpadding-bottom 64px.sticky-footermargin -64px auto 0 autowidth 32pxheight 32pxline-height 32pxfont-size 32pxcolor rgba(255,255,255,0.5)cursor pointer

相关介绍文章:
https://www.cnblogs.com/wisewrong/p/6525696.html
https://www.w3cplus.com/css3/css-secrets/sticky-footers.html

sticky-footer实现记录相关推荐

html footer 布局,详解CSS经典布局之Sticky footer布局
何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内容区 ...
css中底部sticky footer
Sticky footers设计是最古老和最常见的效果之一,它可以概括如下: 1 如果页面内容不够长的时候,页脚块粘贴在视窗底部: 2 如果内容足够长时,页脚块会被内容向下推送. 出现问题如图: 方法 ...
vue动画效果配置和弹层css sticky footer
vue动画效果配置有两种方式: 一种是css方式需要注意 4 个(CSS)类名在 enter/leave 的过渡中切换: v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移 ...
css宽高自适应布局，实现Sticky Footer的三种布局方式
宽度自适应布局: 1.使用场景: 一侧(左侧或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小.这种布局结构可用于顶层布局结构亦可用于某个局部功能块,常见于各种web系统( ...
CSS绝对底部布局 Sticky footer
何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内 ...
8个有用的 CSS 技巧:视差图像，sticky footer 等等
译者:前端小智原文:https://medium.com/@bretcameron/parallax-images-sticky-footers-and-more-8-useful-css-tric ...
常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
常用布局简介一.简介网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
css sticky footer实现,css sticky footer经典布局
什么是sticky footer布局? 一般指手机页面中,当内容高度撑不满一屏时,页脚紧贴屏幕底部:当内容高度超过一屏时,页脚紧随其后. 方法一:flex弹性盒子布局父容器container的dis ...
sticky footer布局，页面不足一屏底部footer固定在视窗底部，否则底部footer自动向下顺延
sticky布局在pc端和移动端都有很大的需求,下面列举一下常用并亲测的几种方法. 1.flex布局方式实现 <!DOCTYPE html> <html lang="en& ...
【转贴】CSS Sticky Footer: 完美的CSS绝对底部
原贴地址:http://parandroid.com/css-sticky-footer/ 在帕兰映像中看到一篇好文,将它转贴到这儿. CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在C ...

sticky-footer实现记录

sticky-footer实现记录相关推荐

最新文章

热门文章