MozTW 討論區
https://forum.moztw.org/

Table 高度100%的問題
https://forum.moztw.org/viewtopic.php?f=13&t=25520		 第 1 頁 (共 1 頁)
發表人:  阿白先生 [ 2008-12-21, 13:46 ]
文章主題 :  Table 高度100%的問題
小弟最近遇到了一個小問題

公司的設計師為了要顯示網頁延伸效果，將表格設定了100%

主要是LEFT跟RIGHT的部份，要能隨著高度伸縮


雖然在Firefox 畫面上是可以的，但是在IE上卻完全失效

由於遲無方法，設計師只好將DOCTYPE 拿掉

導致我的 Javascript 程式計算出來的結果有相當大的落差

但問題我始終沒有辦法解決，希望各位板友能幫忙一下


HTML 原始碼如下：
引言回覆:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>

<style type="text/css">
html, body { padding:0; margin:0; height:100%; }
body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; }
table { border:1px solid blue; }
table td { border:1px solid red; }
</style>

</head>

<body>

<table width="800" align="center" height="100%">
<tr>
<td height="200" colspan="2">TOP</td>
</tr>
<tr>
<td width="150">LEFT</td>
<td width="613">RIGHT</td>
</tr>
<tr>
<td height="200" colspan="2">BOTTOM</td>
</tr>
</table>

</body>
</html>
發表人:  softcup [ 2008-12-22, 17:25 ]
文章主題 : 
要不要試試看 jQuery (http://jquery.com/) 來幫你處理？
代碼:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#table_id").height($("body").height());
  });
</script>
<table id="table_id" width="800" align="center" height="100%">
  <tr>
    <td height="200" colspan="2">TOP</td>
  </tr>
  <tr>
    <td width="150">LEFT</td>
    <td width="613">RIGHT</td>
  </tr>
  <tr>
    <td height="200" colspan="2">BOTTOM</td>
  </tr>
</table>
發表人:  qualle [ 2008-12-24, 12:36 ]
文章主題 : 
IE6（7以後不知道）是看不懂「html>body table」這樣的CSS選取符的，但也就只有他看不懂。

如果利用這點，把CSS寫成：

table { …For IE Properties… }
html>body table { …For FollowingStandard-Browsers Properties …}

的話…
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/