如何在表格單元格內垂直拉伸DIV?
我想height: 100%
將被罰款
但在某些情況下 - 它不是(至少在IE8)在表格單元格內垂直拉伸div - IE8
這裏是一個簡單的例子:
3行的表,用標題,內容,和頁腳;
我希望'content'單元格中的'content'DIV垂直拉伸100%; 它在FF和鉻,但不是在IE8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div style="overflow: auto; height: 20em; width: 20em;">
<table style="height: 100%; width: 100%;">
<tr style="background-color: blue;">
<td>
<div>header</div>
</td>
</tr>
<tr style="height: 100%;">
<td style="background-color: yellow;">
<div style="height: 100%; background-color: red; overflow-y: scroll;">
content
</div>
</td>
</tr>
<tr style="background-color: blue;">
<td>
<div>footer</div>
</td>
</tr>
</table>
</div>
任何人都可以提出一個解決方案,這個簡單的問題? 它在IE8,FF任何Chrome工作(IE7及以上並不重要)
,它必須是基於CSS(不需要JavaScript)
請,像「不使用表格排版不建議智慧',因爲我可以使用display: table
等DIVs - 問題是相同的(我在例子中使用TABLE,TR,TD,因爲它更具可讀性)
您的示例代碼似乎在IE8中正常工作。 – Faust 2011-04-09 20:52:00
好的,那是因爲你在怪癖模式下嘗試過......但我需要標準模式(我編輯了示例,並添加了doctype定義) – slobo 2011-04-10 14:54:54