Tuesday, October 02, 2007 - Posts

<!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>

Posted 02 October 2007 01:57 AM by Jeffrey | 9 comment(s)

Filed under: Tips, ASP.NET, Web

Tuesday, October 02, 2007 - Posts

Search

This Blog

Syndication