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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247618.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247618.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247618.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

敏友的【敏捷個人】有感(3): 有感于“敏捷個人”討論與練習

2010年我對個人管理進行了自己的一些思考&#xff0c;在2011年提出敏捷個人概念&#xff0c;并且在線上、線下進行了多次交流&#xff0c;在一些大會上也做過分享。現在&#xff0c;已經有很 多IT和非IT的敏友們知道并在踐行敏捷個人&#xff0c;幫助自己更快的成長。我收到大家…

jQuery編寫插件

引言&#xff1a; 在項目中不同頁面經常要用到已經寫好的交互&#xff0c;比如彈窗&#xff0c;比如下拉菜單&#xff0c;比如選項卡&#xff0c;比如刪除... 此時如果每次都把代碼copy一份無疑是一件比較麻煩并且無趣的事情&#xff0c;而且個人認為有些low了&#xff0c;我們…

webstorm中nodejs代碼提示

preferences->languages&frameworks->Node.js and Npm中選擇一個本地的node版本 preferences->languages&frameworks->JavaScript->Libraries 勾選node.js Core 回到代碼

9012教你如何使用gulp4開發項目腳手架

本文將會介紹如何使用gulp4來搭建項目腳手架&#xff0c;如果您還在使用gulp3或更老的版本&#xff0c;您也以通過本文的一些思想將之前的項目進行完善&#xff0c;更新。如果gulp不是你們團隊的重點&#xff0c;也可以移步我的另一篇文章:用 webpack 4.0 擼單頁/多頁腳手架 (j…

nodejs模塊

nodejs模塊遵循commonJS規范&#xff0c;但并不是完全實現規范&#xff0c;主要使用require引入模塊、使用exports導出模塊。 導出屬性或方法 使用exports mouduleA.js&#xff1a; var say function(world){console.info("say: "world); }var sing function(wo…

Array.prototype.slice.call(arguments)

Array.prototype.slice.call(arguments)能將具有length屬性的對象轉成數組&#xff0c;除了IE下的節點集合&#xff08;因為ie下的dom對象是以com對象的形式實現的&#xff0c;js對象與com對象不能進行轉換&#xff09;如&#xff1a;1 var a{length:2,0:first,1:second}; 2 Ar…

動態內存分配導致內存泄漏之處

摘要&#xff1a;舉了幾個動態內存分配過程中&#xff0c;發生內存泄漏的例子 1. 分配了內存&#xff0c;卻沒有及時刪除,導致泄漏 1: void doSomething() 2: { 3: int *pnValue new int; 4: } 2. 為指針變量分配了一個內存&#xff0c;然后又讓指針變量指向其他的值,導致…

nodejs常用模塊-url

URL nodejs中針對url的常用方法。 node下打印url&#xff0c;結果&#xff1a; 引入url模塊 var url require(url) 1、parse方法 將url解析成對象&#xff0c;parse方法原型&#xff1a; url.parse(urlStr[, parseQueryString][, slashesDenoteHost]) 可傳遞三個參數…

常用的javascript設計模式

請堅持 什么是設計模式 百度百科&#xff1a; 設計模式&#xff08;Design pattern&#xff09;是一套被反復使用、多數人知曉的、經過分類編目的、代碼設計經驗的總結。 使用設計模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。 毫無疑問&#xff0c;設計模式…

express項目創建

1、安裝項目生成器 cnpm i express-generator -g express4.0以后&#xff0c;express與express-generator包分離&#xff0c;全局使用express命令生成項目骨架時應該安裝express-generator包。 2、生成項目骨架 express server 默認使用的是jade模板&#xff0c;使用ejs模…

設置Jexus開機啟動

把jexus做成系統服務&#xff0c;就像windows服務一樣&#xff0c;可以設置開機啟動就可以了。 第一、進入目錄 /lib/systemd/system/ 第二、新建文件 vi jexus.service 文件內容 [Unit] Descriptionjexus Afternetwork.target[Service] Typeforking ExecStart/usr/jexus/jw…

iOS警告-This block declaration is not a prototype

關于警告 我們定義一個不帶參數的block,通常是如下的方式 1typedefvoid (^UpdateSwichBtnBlock)();在xcode9中會提示一個警告 12This block declaration is not a prototypeInsert ‘void解決方式可以是如下的幾種 1typedefvoid (^UpdateSwichBtnBlock)(void);但是這樣,很多第三…

mac環境mongodb安裝與配置

一、安裝 MAC環境安裝mongodb有兩種方式&#xff0c;一種方式是通過下載安裝包&#xff0c;另一種方式是通過homebrew。 1、安裝包方式 從mongodb官網可以下載MAC安裝包&#xff1a;https://www.mongodb.com/download-center#community 或者使用curl下載 # 進入 /usr/loca…

用兩個棧來實現一個隊列,完成隊列的Push和Pop操作。 隊列中的元素為int類型...

以下為借鑒 var stack1 [], stack2[]; function push(node){stack1.push(node);}function pop(){if(stack2.length){return stack2.pop();}else{if(stack1.length){var len stack1.length;for(var i0;i<len;i){stack2.push(stack1.pop());}return stack2.pop()}else{retur…

使用CocoaPods導入百度地圖SDK所遇到的坑

執行pod install遇到的問題:解決方安:百度了下,發現pod install命令被墻了,換成pod install --verbose --no-repo-update

NSTimer不準確與GCDTimer詳解

NSTimer不準&#xff0c;scheduleTimer放在runloop里面&#xff0c;受runloop模式影響會不準// [NSTimer scheduledTimerWithTimeInterval:<#(NSTimeInterval)#> target:<#(nonnull id)#> selector:<#(nonnull SEL)#> userInfo:<#(nullable id)#> r…

flex的12個屬性

容器&#xff08;父元素&#xff09;的屬性&#xff1a; flex-direction屬性決定主軸的方向 flex-wrap 屬性決定項目在一行排不下的情況下是否換行 flex-flow flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式&#xff0c;默認值為row nowrap。 jstify-content …

vue圖片懶加載插件vue-lazyload

插件地址&#xff1a;https://github.com/hilongjw/vue-lazyload demo&#xff1a;http://hilongjw.github.io/vue-lazyload/ 1、安裝 cnpm i vue-lazyload -S 2、使用 main.js import VueLazyLoad from vue-lazyloadVue.use(VueLazyLoad, {error:/static/error.png,loadin…

IT需求過程管理

IT部門就是為其他業務、內勤部門提供信息化手段的&#xff0c;所以在實施信息化系統的時候首先要做的就是需求調研&#xff0c;但是針對于絕大多數業務部門的人員而言&#xff0c;信息系統是很不熟悉的&#xff0c;我們會經常聽到這樣的回復“這個應該很快就可以實現吧”、“當…

maskView與CAGradientLayer詳解

#maskView基本原理 - png圖片透明像素的原理 - maskView可類比于多張png圖片的疊加遮罩&#xff0c;原理類似 - maskView是iOS8以上才有的&#xff0c;如果要考慮兼容低版本&#xff0c;用maskLayer替代 //使用maskView的情況 property (nonatomic, strong)UIImageView *addIma…