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: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 9 梅留言

  • 第9梅
    彩色糖 說道:

    我用CSS实现了效果,但是感觉不是很好。百度搜了一下,发现你的这段代码。觉得很实用啊!谢谢!

  • 第8梅
    pandao 說道:

    这种效果直接用CSS就可以实现,用不着JS。

    回應:
    CSS 可實作高度100%,
    但當超過時,區塊會產生一些問題
  • 第7梅
    陳小白 說道:

    抱歉~剛剛那筆沒貼好
    重新貼一次我的程式碼部分

    body{background:#eeeeee; margin:0;}
    #wrapper {
    width:990px;
    background:#fff;
    margin:0 auto;
    }
    #header{height:100px; background:#3995d0; line-height:100px; text-align:center; }
    #header a{
    font-size:36px;
    font-weight:bold;
    color:#FFFFFF;
    text-decoration: none;
    }
    #content{
    font-size:15px;
    background-color: #FFF;
    }
    #content_001 {
    background-color: #63C;
    width: 190px;
    float: left;
    }
    #content_002 {
    background-color: #CC3;
    float: left;
    width: 800px;
    }
    #footer{height:40px; background:#3995d0; line-height:40px; text-align:center; color:#CCCCCC; font-size:12px;}

    梅問題教學網

    這裡是menu部分

    這裡是內文部分

    Copyright © 2007-2011 梅問題教學網 All Rights Reserved.

    回應:
    你好~~關於你的問題,
    由於這隻程式,只能將中間的DIV撐滿,
    若要在一個DIV中包二個DIV且同時等高,
    印象中男丁大大的部落有相關的範例~~
    可至男丁的部茖找看看http://abgne.tw