最近面了好幾個前端，工作經驗有高有低，居然都不知道絕對底部是什麼，也沒有人能說出一種實現方式，讓我不禁感慨前端領域的良莠不齊
絕對底部，或者說 sticky footer，是一種古老且經典的頁面效果：
當頁面內容超出螢幕，頁尾模組會像正常頁面一樣，被推到內容下方，需要拖動滾動條才能看到
而當頁面內容小於螢幕高度，頁尾模組會固定在螢幕底部，就像是底邊ftmmv距為零的固定定位
一、經典套路
這種套路的思路是，給內容區域設定 min-height: 100%，將 footer 推到螢幕下方
然後給 footer 新增 margin-top，其值為 footer 高度的負值，就能讓ftmmv footer 回到螢幕底部
html：
程式設計客棧;
填充內容
這是頁尾
css:
html,body
body > .wrap
.content
.footer
需要注意的就是內容區域 content 的 padding、footer 的 height 和 margin， 必須保持一致
這種寫法的相容性非常好，實測 ie7 也能正常展示
但是如果頁面的主體布局有其他相容性問題，sticky footer 就需要做一些相應的修改
二、flexbox
不得不說，css3 帶來了前端的一次變革，其中 flexbox 更是帶來了網頁布局的一次變革
雖然相容性限制了 flexbox 在國內的推廣，但不可否認的是，flexbox 是前端布局的一大趨勢
html:
填充內容
這是頁尾@ftmmvwisewrong
css:
html, body
body > .content
和經典套路相比，首先是 html 部分，內容區域 content 不再需要 wrap 容器
然後 css 部分**成功，僅僅使用四行**，就解決了曾經困擾了一代人的難題
而且使用 flexbox，就不需要限定 footer 的高度，讓頁面布局更加靈活
當然缺點也是顯而易見的，只有 ie10 及以上的瀏覽器才支援 程式設計客棧flex 布局
本文標題: 詳解sticky footer 絕對底部的兩種套路
本文位址:
網頁布局 StickyFooter
網頁布局中經常會遇到這種問題，那就是我們的網頁footer並不能呢一直停留在網頁的底部。我們一般的慣用方法就是將網頁的footer固定定位。但是如果我們將footer固定定位後，我們的網頁內容多，一屏顯示不出來時，我們的footer仍在視窗的底部，並且遮擋我們的內容，那麼我們今天的這種布局方式，就是...
認識Sticky footer布局
1.簡單理解就是 沒內容時，它在底部，有內容時它始終顯示在內容的底部，不會被內容覆蓋掉，相當於footer部分就固定在了底部。2.該布局的設定方式 包裹內容區的盒子以及內容區的高度均為100 與此同時為內容區設定乙個padding bottom 100px 設定的這個值就是給底部區域留的 那麼底部區...
Sticky footer經典布局
html 這是乙個p標籤 這是乙個p標籤 執行效果自行複製 實踐，這個是經過我自己多次測試發現沒有問題的。需要注意的是，content的padding bottom是與footer的margin top以及height一致的值，只是margin top的值是負而已。css html 這是乙個p標籤 ...