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

分類:Javascript | 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,這樣就大功告成囉!這樣講各位可能還是一頭霧水,直接看下方範例最能體會。
[範例預覽]




回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 10 梅留言

  • 第10梅
    Angela 說道:

    請教梅干老師~

    我使用了這個DIV高度100%的JQ
    但是我的頁面出現了一個問題
    當瀏覽器視窗全螢幕時內容DIV無法"隨意長高度",當我開啟隱藏的區塊時內容DIV就會壓到FOOTER
    但是瀏覽器視窗無全螢幕的情況下又可以隨意長高度(FOOTER會正常被往下擠)

    請老師點選網址https://dl.dropboxusercontent.com/u/109040736/ask/p20.html
    在瀏覽器全螢幕的情況下點選列表問題 請將問題全打開 就會出現問題點
    FIREFOX跟Chrome都有一樣的問題

    請問是不是我哪邊漏掉了什麼沒有寫到呢~

    謝謝梅干老師幫忙解答

    回應:
    關於這個目前可用CSS來解決