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>的高度也需要留意。