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


Comments

# by sxryan@gmail.com

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.. (依照這個方式) 而是會上下一分為二 (下面較大一些)... 把表格加上背景色更容易看.. 怎麼解咧.....

# by sxryan@gmail.com

忘了提一件事情.. 據說.. <!DOCType ... 那行如果刪掉，會不能使用一些功能， 例如skin... 我不知道是不是真的... 目前我寫的asp.net 2.0網頁，尚未用到theme & skin.. 目前我的做法.. 暫時會用與那93%的網頁同流合污吧... orz

# by Jeffrey

用margin: -50px的技巧可以讓Footer固定在最下端，但主體也要一些配合就是了。例如: http://webpages.blog.hexun.com/6564009_d.html CSS真是一整個奧妙，可以組合出各種效果，好玩的程度實在不亞於寫程式呢!

# by studentjason

我覺得用JavaScript 來css 的問題 並不是好辦法... 看來我還是把doctype 拿掉好了!!

# by 使用CSS可以解決唷

試試看這個 div{ over-float:hidden; }

# by houzin

如果有兩row， 上row DIV長120px 下Row DIV 撐至最長 XHTML 也很難作到 用非標準只要一個Table裡的TD各放一個DIV就好了， 但xhtml中TD 裡的DIV Height設為% 一樣沒用

# by 果果

的确是个问题，我也一直解决不了！ 而且现在用Sharepoint，里面全是100%的table。

# by 小旦

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

# by Junior

感谢ing...

# by LovelyLife

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

Post a comment