css中的Sticky footer 布局

2021-08-29 17:58:23 字數 614 閱讀 6196

什麼叫sticky footer 布局呢?

我們所見到的大部分**頁面,都會把乙個頁面分為頭部區塊、內容區塊和頁尾區塊,當頭部區塊和內容區塊內容較少時,頁尾能固定在螢幕的底部,而非隨著文件流排布。當頁面內容較多時,頁尾能隨著文件流自動撐開,顯示在頁面的最底部,這就是sticky footer布局。

一般網上會推薦幾種方法,但經過親身實踐,我發現還是負margin布局方式比較實用,相容性最好

它的布局是:

/*footer部分*/

css:

/* sticky footer 布局 */

.clearfix-sticky

.clearfix-sticky:after

height: 100%; /*為了 這個100%能夠生效 ,父級必須也要設height: 100%;*/

} width: 100%;/* 此處加width: 100%;是因為.clearfix-sticky的設定影響了布局 */

height: auto;

min-height: 100%;

}.content-sticky

.footer-sticky

這樣就ok了

CSS 關於css中的border

曾經一直以為html中的border是直角的,直到有一天 test效果如下 突然有一種被欺騙了的感覺。我們可以選擇理解乙個border為兩個三角形再加乙個矩形。如上所示。繪製小尾巴 當對乙個角應用圓角樣式,如果這個角相鄰的兩個border乙個有定義而乙個無定義,那麼繪製的結果就是由粗到細的 小尾巴了...

css中的定位

本文只是個額外的說明,作為基礎知識的補充和額外的關注點 定位的分類以及預設定位 fix,static,relative,absolute 各個定位的包含塊是怎麼樣的 1.relative和static的包含塊由最近的塊級框,表單元格或行內塊祖先框的內容邊界構成 2.fixed的包含塊是視窗本身 3....

CSS中的重點

給父元素設定一些屬性,子元素也可以使用,這個我們就稱之為繼承性。並不是所有的屬性都可以繼承,以color font text line list 開頭的屬性可以繼承。text decoration不可繼承 繼承性中的特殊性 a標籤的文字顏色是不能繼承的 h標籤的文字大小是不能繼承的 合理使用繼承可以...