您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關css中sticker-footer布局的示例分析,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
在網(wǎng)頁設計中,Sticky footers設計是最古老和最常見的效果之一,大多數(shù)人都曾經(jīng)經(jīng)歷過。它可以概括如下:如果頁面內(nèi)容不夠長的時候,頁腳塊粘貼在視窗底部;如果內(nèi)容足夠長時,頁腳塊會被內(nèi)容向下推送。這種效果不僅是無處不在,很受歡迎,而且實現(xiàn)起來看上去也非常容易。但實際上實現(xiàn)起來要比預期花的時間更多。此外,在CSS2.1中的解決方案中幾乎都要給頁腳設置一個固定高度。這是很脆弱的,很少是可行的。實際上實現(xiàn)這個效果過于復雜,而且還需要增加特定的標記和一些Hack手段。在CSS2.1中受到一些限制,但使用現(xiàn)代CSS,我們能把這個效果做得更好,那要如何做呢?
1、嵌套層級不深,可直接繼承自 body width:100%; height:100%;
// html <body> <div id="sticker"> <div class="sticker-con">我是內(nèi)容</div> </div> <div class="footer">我是腳</div> </body>
// css html,body{ width:100%; height:100%; } #sticker{ width:100%; min-height:100%; } .sticker-con{ padding-bottom:40px; // 40px 為 footer 本身高度 } .footer{ margin-top:-40px; // 40px 為 footer 本身高度 }
2、嵌套層級很深,無法直接從上級繼承 百分比高度的
第一種方法:給需要的 sticker-footer 創(chuàng)建一個 wrapper
<body> <div id="wrapper"> <div id="sticker"> <div class="sticker-con">我是內(nèi)容</div> </div> <div class="footer">我是腳</div> </div> </body>
.wrapper{ position:fixed; // 這樣 wrapper 就可以直接從 html,body 繼承 百分比高度了 overflow:auto; // 當高度超過 100% ;時產(chǎn)生滾動條 width:100%; height:100%; // 繼承自 body } // wrapper 內(nèi)部包裹的結(jié)構(gòu),就如上所示了,css樣式也一樣
3. 當無法用百分比獲取高度時,也可通過js方式獲得
//css樣式同第一種, 只是 sticker 的 min-height 用css獲取 <body> <div id="sticker"> <div class="sticker-con">我是內(nèi)容</div> </div> <div class="footer">我是腳</div> </body> var sticker = document.querySelector('#sticker'); var h = document.body.clientHeight; sticker.style.minHeight = h - 44 + 'px'; //這種方式也可應對一些特殊情況,比如有頭部導航欄的情況,可以靈活的處理 min-height:
4. 強大的 flex 布局 flex-direction:column
將wrapper容器 display:flex; flex-direction:column
sticker: flex:1; 占據(jù)除footer以外的剩余空間
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>sticker footer</title> </head> <style> html,body{ width: 100%; height: 100%; background-color: #ccc; margin:0; padding: 0; } header{ height:44px; width: 100%; text-align: center; line-height: 44px; } #wrapper{ display: flex; flex-direction: column; width: 100%; /*height: 100%;*/ } #sticker{ background-color: red; flex: 1; } #sticker .sticker-con{ padding-bottom: 40px; } .footer{ background-color: green; height: 40px; } </style> <body> <header>我是頭部</header> <div id="wrapper"> <div id="sticker"> <div class="sticker-con">我是內(nèi)容</div> </div> <div class="footer">我是腳</div> </div> </body> <script> var wrapper = document.querySelector('#wrapper'); var h = document.body.clientHeight; wrapper.style.minHeight = h - 44 + 'px'; // 減去頭部導航欄高度 </script> </html>
關于“css中sticker-footer布局的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。