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>
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也要跟著變，因此還得掛上window.onresize亦步亦趨地跟著改變大小，頗累人的。<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; //Firefoxdocument.getElementById("myDiv").style.height = h + "px";</script>
所幸，我找到了另一篇鞭辟入裡的好文章，更進一步地挖掘到問題的根源不在於XHTML不支援100%了，而是預設HTML長度改成依內容而訂，不再一次佔滿整個瀏覽器的可視範圍，所以，用以下的Style設定讓網頁主體"出血滿版"，height: 100%就又再次活了起來!! Cool!
轉載自:http://blog.darkthread.net/post-2007-10-01-tips-get-100-height-in-xhtml.aspx<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>
沒有留言:
張貼留言