MozTW 討論區 • 檢視主題 - Table 高度100%的問題

所有顯示的時間為 UTC + 8 小時

Table 高度100%的問題

第 1 頁 (共 1 頁)

[ 3 篇文章 ]

列印模式	上一個主題 \| 下一個主題

發表人

內容

阿白先生

文章主題 : Table 高度100%的問題

發表於 : 2008-12-21, 13:46

註冊時間: 2008-12-21, 13:35
文章: 1

小弟最近遇到了一個小問題

公司的設計師為了要顯示網頁延伸效果，將表格設定了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>

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5

softcup

文章主題 :

發表於 : 2008-12-22, 17:25

[網站管理員]

註冊時間: 2002-11-04, 13:31
文章: 463
來自: 港都

要不要試試看 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>

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.1b2) Gecko/20081201 Firefox/3.1b2

qualle

文章主題 :

發表於 : 2008-12-24, 12:36

註冊時間: 2008-03-08, 16:32
文章: 66

IE6（7以後不知道）是看不懂「html>body table」這樣的CSS選取符的，但也就只有他看不懂。

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

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

的話…

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

第 1 頁 (共 1 頁)

[ 3 篇文章 ]

MozTW » 討論區首頁 » 特別議題 » 問題網站與網頁技術傳教

所有顯示的時間為 UTC + 8 小時

誰在線上

正在瀏覽這個版面的使用者：沒有註冊會員和 16 位訪客

您不能在這個版面發表主題
您不能在這個版面回覆主題
您不能在這個版面編輯您的文章
您不能在這個版面刪除您的文章
您不能在這個版面上傳附加檔案

前往 :