DIV CSS 頁尾永遠保持在頁面底部

2021-09-07 05:32:31 字數 951 閱讀 7194

頁尾永遠保持在頁面底部

有時候,我們用css建立乙個高度自適應布局,如何保證頁尾(footer)在內容不超過一屏的情況下始終保持在布局最下方是乙個比較頭疼的事。我看過一些利用絕對定位的例子,但總感覺不是那麼完美,經過一下午的研究總結出乙個利用負值外補丁的方法來實現這個效果的方法,相容ie5.0 ,opera 8.5 ,firefox 1.5 。下面我們看步驟:

1、為了讓瀏覽器識別高度100%我們需要先給 html 和 body 加上乙個高度值,同時清除所有元素的 margin 和 padding。經測試,html和body的 height: 100%; 等於整個瀏覽器視窗的總高度,無論內容是否超過一屏。而它們下一級子元素 height: 100%; 則等於第一屏的高度。是不是有點不好理解?

css **

* html, body 

2、因為上面提到的問題,所以為了讓布局自適應高度,我們要加上 min-height: 100%;,雖然ie不支援這個屬性但是ie的 height: 100%; 有同樣的作用:

css **

min-height: 100%;

}height: 100%;}

這樣,乙個最簡單的最小高度滿一屏的自適應布局就做好了。為了便於檢視,我加了一些寬度和背景色修飾,如下:

css **

* html, body 

width: 770px;

min-height: 100%;

background: #ccc;

margin: auto;

text-align: left;

}height: 100%;}

下面看完整**的執行效果:

此處顯示  "content-box" 的內容

此處顯示  i"sidebar" 的內容

此處顯示   "footer" 的內容

DIV CSS 頁尾永遠保持在頁面底部

頁尾永遠保持在頁面底部 有時候,我們用css建立乙個高度自適應布局,如何保證頁尾 footer 在內容不超過一屏的情況下始終保持在布局最下方是乙個比較頭疼的事。我看過一些利用絕對定位的例子,但總感覺不是那麼完美,經過一下午的研究總結出乙個利用負值外補丁的方法來實現這個效果的方法,相容ie5.0 op...

如何將頁尾(footer)保持在頁面底部

將footer保持在視覺視窗的底部是常見的需求。當頁面的內容主體高度較大 超出螢幕可視區域的高度 時,footer元素直接跟在內容後面即可。但是,當乙個 html 頁面包含少量的內容時,footer元素就會坐落在頁面的中間,在下面留下空白,這看起來很糟糕,尤其是在大螢幕上。如下圖 我們先給出基礎的頁...

最小高度100 頁尾保持在底部的布局方法

有時候,我們用css建立乙個高度自適應布局,如何保證頁尾 footer 在內容不超過一屏的情況下始終保持在布局最下方是乙個比較頭疼的事。我看過一些利用絕對定位的例子,但總感覺不是那麼完美,經過一下午的研究總結出乙個利用負值外補丁的方法來實現這個效果的方法,相容ie5.0 opera 8.5 fire...