資訊專欄INFORMATION COLUMN
摘要：設(shè)計是最古老和最常見的效果之一，它可以概括如下如果頁面內(nèi)容不夠長的時候，頁腳塊粘貼在視窗底部如果內(nèi)容足夠長時，頁腳塊會被內(nèi)容向下推送。所有內(nèi)容區(qū)好，方法一也比較推薦，以上就是個人對的理解
Sticky footers設(shè)計是最古老和最常見的效果之一，它可以概括如下：
1 如果頁面內(nèi)容不夠長的時候，頁腳塊粘貼在視窗底部； 2 如果內(nèi)容足夠長時，頁腳塊會被內(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;
這個方法兼容性很好，實(shí)測 IE7 也能正常展示，為了更好的兼容性，可以為wrapper添加清除浮動
.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;
}
這個方法精簡，當(dāng)然缺點(diǎn)也是顯而易見的，只有 IE10 及以上的瀏覽器才支持 flex 布局
方法三：內(nèi)容區(qū)域計算最小的高度
這種方法通過vh(viewpoint height)來計算整體視窗的高度(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,好，方法一也比較推薦，以上就是個人對sticky Footer的理解(? ω ?)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112972.html
摘要：但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。只需要幾行代碼就可以實(shí)現(xiàn)，而且像上面計算或添加額外的元素。 CSS實(shí)現(xiàn)Sticky Footer 什么是 Sticky Footer 所謂 Sticky Footer，并不是什么新的前端概念和技術(shù)，它指的就是一種網(wǎng)頁效果： 如果頁面內(nèi)容不足夠長時，頁腳固定在瀏覽器窗口的底部；如果內(nèi)容足夠長時，頁腳固定在頁面的最底部。但如果網(wǎng)頁內(nèi)...
摘要：但如果網(wǎng)頁內(nèi)容不夠長，置底的頁腳就會保持在瀏覽器窗口底部。只需要幾行代碼就可以實(shí)現(xiàn)，而且像上面計算或添加額外的元素。 CSS實(shí)現(xiàn)Sticky Footer 什么是 Sticky Footer 所謂 Sticky Footer，并不是什么新的前端概念和技術(shù)，它指的就是一種網(wǎng)頁效果： 如果頁面內(nèi)容不足夠長時，頁腳固定在瀏覽器窗口的底部；如果內(nèi)容足夠長時，頁腳固定在頁面的最底部。但如果網(wǎng)頁內(nèi)...
摘要：讓固定在頁面視口底部這是一個讓網(wǎng)站固定在瀏覽器頁面內(nèi)容小于瀏覽器高度時頁面底部的技巧。如何通過用讓固定在頁面頂部。負(fù)外邊距應(yīng)該與的整體高度相等包括。沒有內(nèi)容會超出和的標(biāo)簽，除非超出內(nèi)容是通過的絕對定位。 讓footer固定在頁面（視口）底部（CSS-Sticky-Footer） 這是一個讓網(wǎng)站footer固定在瀏覽器(頁面內(nèi)容小于瀏覽器高度時)/頁面底部的技巧。由HTML和CSS實(shí)現(xiàn)...
摘要：讓固定在頁面視口底部這是一個讓網(wǎng)站固定在瀏覽器頁面內(nèi)容小于瀏覽器高度時頁面底部的技巧。如何通過用讓固定在頁面頂部。負(fù)外邊距應(yīng)該與的整體高度相等包括。沒有內(nèi)容會超出和的標(biāo)簽，除非超出內(nèi)容是通過的絕對定位。 讓footer固定在頁面（視口）底部（CSS-Sticky-Footer） 這是一個讓網(wǎng)站footer固定在瀏覽器(頁面內(nèi)容小于瀏覽器高度時)/頁面底部的技巧。由HTML和CSS實(shí)現(xiàn)...
摘要：這樣下來我們就可以測試代碼了，然后發(fā)現(xiàn)如果內(nèi)容多到一定程度之后小叉雖然被擠出屏幕外了，但是卻擋在了文字前面，所以我們這里在里面的內(nèi)容器加上了一個這樣文字就不會再被擋住了。 最近碰巧再看網(wǎng)上那一套火的不得了的高仿餓了么的視頻，正巧看到一個css技巧，看了一下覺得挺簡單，但是卻又非常精髓，而平時公司項目和自己練手的項目里面都沒有這樣的需求，在這里就簡單的講述一下這個技巧（你就當(dāng)我在這里做個...
閱讀 2005·2021-11-23 10:08
閱讀 2340·2021-11-22 15:25
閱讀 3276·2021-11-11 16:55
閱讀 775·2021-11-04 16:05
閱讀 2610·2021-09-10 10:51
閱讀 715·2019-08-29 15:38
閱讀 1589·2019-08-29 14:11
閱讀 3489·2019-08-29 12:42
