TIPS-Get 100% Height in XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Height Test</title></head>
<body>
<div style="background-color:Gray; height:100%;">
AAA
</div>
</body></html>

如果你想用以上的Code去顯示一個佔滿全網頁的DIV,可能會大失所望。這段Code在IE6, 7或Firefox上都只會顯示一行的高度。

height:100%的寫法過去明明用得好好,昨是今非,為什麼?

XHTML!

Yes! 如果把最上面的<!DOCTYPE>拿掉,就會發現DIV的Behavior立刻恢復我們熟悉的樣子。但向XHTML標準看齊是趨勢,不可能為了這個理由不用XHTML! (什麼? 你覺得反正全世界目前仍有93%的網頁都不符合XHTML規範,拿掉XHTML比較省事。OK,這篇文章讀到這裡就可以,閣下可以先離席了。)

Google了一下,有不少人討論這個問題,其中有相當的比例是用利用window.innerHeight(FF)或window.document.documentElement.clientHeight(IE)取得當時的瀏覽器高度後重設DIV的style.height。

<div style="background-color:Gray; height:100%;" id="myDiv">
AAA
</div>
<script type="text/javascript">
var h = (document.all) ?
            document.documentElement.clientHeight //IE
          : window.innerHeight; //Firefox
document.getElementById("myDiv").style.height = h + "px";
</script>

但這只解決了一半的問題,當瀏覽器視窗大小調整時DIV也要跟著變,因此還得掛上window.onresize亦步亦趨地跟著改變大小,頗累人的。

所幸,我找到了另一篇鞭辟入裡的好文章,更進一步地挖掘到問題的根源不在於XHTML不支援100%了,而是預設HTML長度改成依內容而訂,不再一次佔滿整個瀏覽器的可視範圍,所以,用以下的Style設定讓網頁主體"出血滿版",height: 100%就又再次活了起來!! Cool!

<head><title>Height Test</title>
<style type="text/css">
html, body 
{ margin: 0; padding: 0; height: 100%; border:none; }
</style>
</head>
<body>
<div style="background-color:Gray; height:100%;">
AAA
</div>

相關文章: TIPS-XHTML下如何強制指定SPAN寬度 KB-失控的HTML物件

[2013-05-18補充]<iframe>的高度也需要留意。

歡迎推文分享:
Published 01 October 2007 10:57 PM 由 Jeffrey
Filed under: , ,
Views: 25,363



意見

# sxryan@gmail.com said on 04 October, 2007 08:23 AM

asp.net 2.0網頁  加上那個css之後

是可以解決單一格子的網頁物件..

但是像table中,有多個tr/td時,就不行了...

整個table是會變滿版,但是在td上面設定的height,仍然不會乖乖聽話..

舉例.. 通常網頁的最下面都會放一些版本或是版權、設計者的資料..

例如:

<table style="width:100%;height:100%">

<tr>

<td>內容</td>

</tr>

<tr>

<td style="height:50px">

要固定在頁底的文字

</td>

</tr>

</table>

這樣應該是會畫出一個滿版的table,上面全部都是內容,而頁面最底部有50px的高度固定放頁底文字..

如果內容不到一個畫面,底部的50px應該也仍然要固定在畫面最底部..

但是在vs2005中,就是不會乖乖的呈現.. orz..

(依照這個方式)

而是會上下一分為二 (下面較大一些)...

把表格加上背景色更容易看..

怎麼解咧.....

# sxryan@gmail.com said on 04 October, 2007 08:49 AM

忘了提一件事情..

據說.. <!DOCType ... 那行如果刪掉,會不能使用一些功能,

例如skin...

我不知道是不是真的...

目前我寫的asp.net 2.0網頁,尚未用到theme & skin..

目前我的做法.. 暫時會用與那93%的網頁同流合污吧...

orz

# Jeffrey said on 04 October, 2007 11:23 AM

用margin: -50px的技巧可以讓Footer固定在最下端,但主體也要一些配合就是了。例如: http://webpages.blog.hexun.com/6564009_d.html

CSS真是一整個奧妙,可以組合出各種效果,好玩的程度實在不亞於寫程式呢!

# studentjason said on 22 January, 2008 02:00 AM

我覺得用JavaScript 來css 的問題 並不是好辦法...

看來我還是把doctype 拿掉好了!!

# 使用CSS可以解決唷 said on 18 February, 2008 01:03 AM

試試看這個

div{

over-float:hidden;

}

# houzin said on 20 April, 2008 09:48 PM

如果有兩row,

上row DIV長120px

下Row DIV 撐至最長

XHTML 也很難作到

用非標準只要一個Table裡的TD各放一個DIV就好了,

但xhtml中TD 裡的DIV Height設為% 一樣沒用

# 果果 said on 22 April, 2008 03:05 AM

的确是个问题,我也一直解决不了!

而且现在用Sharepoint,里面全是100%的table。

# 小旦 said on 08 September, 2008 04:18 AM

感謝了!

設定100%高度真是常用的功能. 能解決這個又XHTML進一步了

# Junior said on 16 October, 2008 12:01 AM

感谢ing...

# LovelyLife said on 06 April, 2009 08:17 PM

的确xhtml是个趋势,现在才发现ie兼容性太强了,强的都不知道自己错在什么地方,呵呵

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<October 2007>
SunMonTueWedThuFriSat
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication