認識Sticky footer布局

2021-08-27 16:14:31 字數 723 閱讀 1214

1.簡單理解就是:沒內容時,它在底部,有內容時它始終顯示在內容的底部,不會被內容覆蓋掉,相當於footer部分就固定在了底部。

2.該布局的設定方式:

》包裹內容區的盒子以及內容區的高度均為100%;

》與此同時為內容區設定乙個padding-bottom:100px;

設定的這個值就是給底部區域留的

》那麼底部區域設定margin-top:-100px.就可以了。

例如:

//html部分:

class="wrap">

class="content">

hello world

div>

div>

class="footer">

i' the footer

div>

body>

//css部分:

html,body

.wrap

.content

.footer

style>效果如下圖:

當新增很多內容時下滑,footer區域仍在底部:

網頁布局 StickyFooter

網頁布局中經常會遇到這種問題,那就是我們的網頁footer並不能呢一直停留在網頁的底部。我們一般的慣用方法就是將網頁的footer固定定位。但是如果我們將footer固定定位後,我們的網頁內容多,一屏顯示不出來時,我們的footer仍在視窗的底部,並且遮擋我們的內容,那麼我們今天的這種布局方式,就是...

Sticky footer經典布局

html 這是乙個p標籤 這是乙個p標籤 執行效果自行複製 實踐,這個是經過我自己多次測試發現沒有問題的。需要注意的是,content的padding bottom是與footer的margin top以及height一致的值,只是margin top的值是負而已。css html 這是乙個p標籤 ...

布隆過濾器個人認識

用於網頁黑名單系統,垃圾郵件過濾系統,爬蟲的 判重系統。一般的意思是在大量資料集合中,判斷乙個新資料是否存在於這個集合中。資料量少還可以使用hashmap和點陣圖bitmap。資料一大占用記憶體不理想。布隆的做飯法是,開闢乙個長度為m的點陣圖陣列,對於每乙個集合的元素使用多個hash函式計算得值 m...