從事網頁設計的朋友,應該會發現到一個小問題,早期在網頁還沒標準化時,應該對於高度百分百感到相當的熟悉,而這高度百分百有它方便之處,當內文少於視窗高度時,至少版會頂天立地的,但自動網頁標準化後,高度100%就不再看見了,最近好友飛肯的姜老師,寫了一隻jQ的應用程式,讓高度重拓往年100%的夢想,由於設定需動到js,梅干感到有些麻煩,就與好友男丁的相助下,完成了這隻高度100%的懶人包,各位只要直接在html中作設定,就可直接使用囉!
DIV高度100%懶人包:
設定方法:
none=”true”->去除外框架的CSS相關設定,如:border、margin、padding。
_height=”none”->當版型有版頭版尾時,則在版頭與版尾的div後方加上_height:=none,就會自動計算出高度將它扣除。
_height=”auto”->比方中間區塊是要高度100%,就在_height的地方設成auto就會自動延展。
_height=”none”->當版型有版頭版尾時,則在版頭與版尾的div後方加上_height:=none,就會自動計算出高度將它扣除。
_height=”auto”->比方中間區塊是要高度100%,就在_height的地方設成auto就會自動延展。
其實設法很簡單,只有三個參數可設定,不計算的就把_height=”none”程式就會自動扣除,若要100%高的DIV就設auto,若外圍還有使用邊框厚度,在最外圍的div設none=true,這樣就大功告成囉!這樣講各位可能還是一頭霧水,直接看下方範例最能體會。
[範例預覽]