Table 排版問題
0
悬赏园豆：200
[已关闭问题]
我在一個 Table 中加入三個 tr，其中第一及第三個 tr 是固定高度(20px)，而剩下的高度就留給中間的 tr。<br>而在中間的 tr 中置入一個 div，當 div 的資料太多時就會出現捲軸，排版的設定如下所示。<br><br>這樣的排版在 IE 上是正常的，不過在 FireFox 會出現異常，div 的高度會因內容多少而一定被拉高，不會產生捲軸；<br>這應該是 IE 及 FireFox 對 css 的解析不一致所導致，請問有比較了解 css 設定的人，知道此情形怎麼解決嗎？<br><br>我有查到下面的文章，可以不使用 Table，直接使用 div 可以解決這個問題。不過目前開發的 web-erp 系統已經幾百張表單了，不太可能做這種大幅度的版面調整。<br><br>最小高度100%页脚保持在底部的布局方法<br>http://www.ui163.com/w3c/second_581.html<br><br><pre><html><br><br><head><br><meta http-equiv="Content-Language" content="zh-tw"><br><meta http-equiv="Content-Type" content="text/html; charset=big5"><br><title>Table 排版</title><br></head><br><body style="width:100%; height:100%; margin: 0; padding: 0;"><br><br><table border="1" id="table1" style="width:100%; height:100%"><br> <tr style="height:20px; background-color: #008000"><br> <td> </td><br> </tr><br> <tr><br> <td><br> <div style="min-height:100%; width:100%; overflow:auto; height:100%;"><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> <p>這是DIV</p><br> </div> <br> </td><br> </tr><br> <tr style="height:20px; background-color: #008000"><br> <td> </td><br> </tr><br></table><br><br></body><br><br></html><br></pre><br><br>
其他回答(1)
0
给你这个代码。这个问题的原因是：firefox会优先min-height属性造成的。
还有你的页面没有设置文档类型，这是不好的习惯。
<!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>new document</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<table border="1" id="table1" style="width: 100%; height: 100%">
<tr style="height: 20px; background-color: #008000">
<td> </td>
</tr>
<tr>
<td>
<div style="height: 100px; width: 100%; overflow-y: auto; border: 1px solid red;">
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
<p>這是DIV</p>
</div>
</td>
</tr>
<tr style="height: 20px; background-color: #008000">
<td> </td>
</tr>
</table>
</body>
</html>
0
如果不熟CSS或操作困难的话可以考虑使用JS来调整.
