1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. jQuery教學-重現DIV區塊高度100%的夢想

jQuery教學-重現DIV區塊高度100%的夢想

2011/05/19

梅問題-jQuery教學-Div高度自動延展100%

  從事網頁設計的朋友,應該會發現到一個小問題,早期在網頁還沒標準化時,應該對於高度百分百感到相當的熟悉,而這高度百分百有它方便之處,當內文少於視窗高度時,至少版會頂天立地的,但自動網頁標準化後,高度100%就不再看見了,最近好友飛肯的姜老師,寫了一隻jQ的應用程式,讓高度重拓往年100%的夢想,由於設定需動到js,梅干感到有些麻煩,就與好友男丁的相助下,完成了這隻高度100%的懶人包,各位只要直接在html中作設定,就可直接使用囉!


DIV高度100%懶人包:

適用版本:IE8.0、Firefox3.6、Chrome、Safari
開發者:姜老師&男丁格爾&梅干扣肉

本站下載:

[範例下載]

設定方法:

none=”true”->去除外框架的CSS相關設定,如:border、margin、padding。
_height=”none”->當版型有版頭版尾時,則在版頭與版尾的div後方加上_height:=none,就會自動計算出高度將它扣除。
_height=”auto”->比方中間區塊是要高度100%,就在_height的地方設成auto就會自動延展。

  其實設法很簡單,只有三個參數可設定,不計算的就把_height=”none”程式就會自動扣除,若要100%高的DIV就設auto,若外圍還有使用邊框厚度,在最外圍的div設none=true,這樣就大功告成囉!這樣講各位可能還是一頭霧水,直接看下方範例最能體會。


[範例預覽]