摘要:設(shè)計(jì)是最古老和最常見的效果之一,它可以概括如下如果頁面內(nèi)容不夠長(zhǎng)的時(shí)候,頁腳塊粘貼在視窗底部如果內(nèi)容足夠長(zhǎng)時(shí),頁腳塊會(huì)被內(nèi)容向下推送。所有內(nèi)容區(qū)好,方法一也比較推薦,以上就是個(gè)人對(duì)的理解
Sticky footers設(shè)計(jì)是最古老和最常見的效果之一,它可以概括如下:
1 如果頁面內(nèi)容不夠長(zhǎng)的時(shí)候,頁腳塊粘貼在視窗底部; 2 如果內(nèi)容足夠長(zhǎng)時(shí),頁腳塊會(huì)被內(nèi)容向下推送。
出現(xiàn)問題如圖:
方法一:經(jīng)典固定高度套路
·html內(nèi)容:
這里是content
為內(nèi)容區(qū)域添加外層包裹的wrapper,設(shè)置css樣式
·css內(nèi)容:
html, body, .wrapper { height: 100%; } body > .wrapper { height: auto; min-height: 100%; } .content { /* 必須使用和footer相同的高度 為底部留白 */ padding-bottom: 150px; } .footer { position: relative; /* footer高度的負(fù)值 */ margin-top: -150px; height: 150px; clear:both; } 重要的是需要設(shè)置min-height:100%,內(nèi)容區(qū)域padding-bottom: 150px;尾部margin-top: -150px; 這個(gè)方法兼容性很好,實(shí)測(cè) IE7 也能正常展示,為了更好的兼容性,可以為wrapper添加清除浮動(dòng) .clearfix{ display: inline-block; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
方法二:Flexbox布局
html:
內(nèi)容區(qū)域
css:
html, body { display: flex; height: 100%; flex-direction: column; } body .content { flex: 1; }
這個(gè)方法精簡(jiǎn),當(dāng)然缺點(diǎn)也是顯而易見的,只有 IE10 及以上的瀏覽器才支持 flex 布局
方法三:內(nèi)容區(qū)域計(jì)算最小的高度
這種方法通過vh(viewpoint height)來計(jì)算整體視窗的高度(1vh等于視窗高度的1%),然后減去底部footer的高度,從而求得內(nèi)容區(qū)域的最小高度。
html:
所有內(nèi)容區(qū)
css:
.content{ min-height:calc(100vh - 7em); box-sizing:border-box; } .footer{ height:7em; width:100%; }
ok,好,方法一也比較推薦,以上就是個(gè)人對(duì)sticky Footer的理解(? ω ?)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/112972.html
摘要:但如果網(wǎng)頁內(nèi)容不夠長(zhǎng),置底的頁腳就會(huì)保持在瀏覽器窗口底部。只需要幾行代碼就可以實(shí)現(xiàn),而且像上面計(jì)算或添加額外的元素。 CSS實(shí)現(xiàn)Sticky Footer 什么是 Sticky Footer 所謂 Sticky Footer,并不是什么新的前端概念和技術(shù),它指的就是一種網(wǎng)頁效果: 如果頁面內(nèi)容不足夠長(zhǎng)時(shí),頁腳固定在瀏覽器窗口的底部;如果內(nèi)容足夠長(zhǎng)時(shí),頁腳固定在頁面的最底部。但如果網(wǎng)頁內(nèi)...
摘要:但如果網(wǎng)頁內(nèi)容不夠長(zhǎng),置底的頁腳就會(huì)保持在瀏覽器窗口底部。只需要幾行代碼就可以實(shí)現(xiàn),而且像上面計(jì)算或添加額外的元素。 CSS實(shí)現(xiàn)Sticky Footer 什么是 Sticky Footer 所謂 Sticky Footer,并不是什么新的前端概念和技術(shù),它指的就是一種網(wǎng)頁效果: 如果頁面內(nèi)容不足夠長(zhǎng)時(shí),頁腳固定在瀏覽器窗口的底部;如果內(nèi)容足夠長(zhǎng)時(shí),頁腳固定在頁面的最底部。但如果網(wǎng)頁內(nèi)...
摘要:讓固定在頁面視口底部這是一個(gè)讓網(wǎng)站固定在瀏覽器頁面內(nèi)容小于瀏覽器高度時(shí)頁面底部的技巧。如何通過用讓固定在頁面頂部。負(fù)外邊距應(yīng)該與的整體高度相等包括。沒有內(nèi)容會(huì)超出和的標(biāo)簽,除非超出內(nèi)容是通過的絕對(duì)定位。 讓footer固定在頁面(視口)底部(CSS-Sticky-Footer) 這是一個(gè)讓網(wǎng)站footer固定在瀏覽器(頁面內(nèi)容小于瀏覽器高度時(shí))/頁面底部的技巧。由HTML和CSS實(shí)現(xiàn)...
摘要:讓固定在頁面視口底部這是一個(gè)讓網(wǎng)站固定在瀏覽器頁面內(nèi)容小于瀏覽器高度時(shí)頁面底部的技巧。如何通過用讓固定在頁面頂部。負(fù)外邊距應(yīng)該與的整體高度相等包括。沒有內(nèi)容會(huì)超出和的標(biāo)簽,除非超出內(nèi)容是通過的絕對(duì)定位。 讓footer固定在頁面(視口)底部(CSS-Sticky-Footer) 這是一個(gè)讓網(wǎng)站footer固定在瀏覽器(頁面內(nèi)容小于瀏覽器高度時(shí))/頁面底部的技巧。由HTML和CSS實(shí)現(xiàn)...
摘要:這樣下來我們就可以測(cè)試代碼了,然后發(fā)現(xiàn)如果內(nèi)容多到一定程度之后小叉雖然被擠出屏幕外了,但是卻擋在了文字前面,所以我們這里在里面的內(nèi)容器加上了一個(gè)這樣文字就不會(huì)再被擋住了。 最近碰巧再看網(wǎng)上那一套火的不得了的高仿餓了么的視頻,正巧看到一個(gè)css技巧,看了一下覺得挺簡(jiǎn)單,但是卻又非常精髓,而平時(shí)公司項(xiàng)目和自己練手的項(xiàng)目里面都沒有這樣的需求,在這里就簡(jiǎn)單的講述一下這個(gè)技巧(你就當(dāng)我在這里做個(gè)...
閱讀 1995·2021-11-23 10:08
閱讀 2325·2021-11-22 15:25
閱讀 3269·2021-11-11 16:55
閱讀 763·2021-11-04 16:05
閱讀 2575·2021-09-10 10:51
閱讀 704·2019-08-29 15:38
閱讀 1573·2019-08-29 14:11
閱讀 3480·2019-08-29 12:42