在表格單元格內垂直拉伸div - IE8

如何在表格單元格內垂直拉伸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>

http://jsfiddle.net/mWMmy/14/

任何人都可以提出一個解決方案，這個簡單的問題？它在IE8，FF任何Chrome工作（IE7及以上並不重要）
，它必須是基於CSS（不需要JavaScript）

請，像「不使用表格排版不建議智慧'，因爲我可以使用display: table等DIVs - 問題是相同的（我在例子中使用TABLE，TR，TD，因爲它更具可讀性）

來源

2011-04-09 slobo

您的示例代碼似乎在IE8中正常工作。 – Faust 2011-04-09 20:52:00

好的，那是因爲你在怪癖模式下嘗試過......但我需要標準模式（我編輯了示例，並添加了doctype定義） – slobo 2011-04-10 14:54:54

您可以從中間td中刪除div內容並使風格到中間td被滾動

那樣

<!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;overflow-y:scroll;vertical-align:top;"> 
       content 
      </td> 
     </tr> 
     <tr style="background-color: blue;"> 
      <td> 
       <div>footer</div> 
      </td> 
     </tr> 
    </table> 
</div>

和你的問題，但總高度是父div的高度，因爲你設置爲高度：20em;

，所以如果你想使一個應用程序，以填補瀏覽器客戶端與autoheight 你只有兩種方式

1-使用框架集一樣，

<frameset ROWS="100px,*,100px"> 
    <frame src="header.htm" /> 
    <frame src="content.htm" /> 
    <frame src="footer.htm" /> 
</frameset>

，這將使汽車高度不啓用Javascript

2 - 使用JavaScript

我問候

來源

2011-04-10 15:16:49 Mhmd

2.正如我在我的問題中寫的，我想要一個僅限CSS沒有JavaScript）解決方案 – slobo 2011-04-10 16:58:04

1。你可能誤解了我的問題，我不想填寫瀏覽器窗口 – slobo 2011-04-10 17:03:11

，因爲我已經寫過我的問題，我想在表格單元格內垂直拉伸DIV。我不想刪除DIV。 – slobo 2011-04-10 17:05:51

如果您的行數不超過您在標記中指定的行數，則此解決方案將起作用，並且您可以控制頁眉和頁腳行的高度。放置位置：表格中的相對位置，FF，Chrome和IE都將該元素識別爲td中絕對定位div的容器。按照標題的高度偏移div的頂部，等等。如果有一些表格邊框或填充，則需要使用左側，右側，頂部和底部屬性稍微補償一點。

<!DOCTYPE html"> 

<html> 
<head> 
</head> 

<body> 
<div style="overflow: auto; height: 20em; width: 20em;position:relative;"> 
<table style="height: 100%; width: 100%;" border=0;> 
    <tr style="background-color: blue;"> 
     <td> 
      <div>header</div> 
     </td> 
    </tr> 
    <tr style="height: 100%;"> 
     <td style="background-color: yellow;"> 
      <div style="position:absolute;top:20px;bottom:20px;left:2px;right:2px;background-color: red; overflow-y: scroll;"> 
       content 
      </div> 
     </td> 
    </tr> 
    <tr style="background-color: blue;"> 
     <td> 
      <div>footer</div> 
     </td> 
    </tr> 
</table> 
</div> 
</body> 
</html>

來源

2011-04-10 15:40:17 Faust

你的解決方案在IE8中工作。但在FF或Chrome中看看它：它變得一團糟：http://jsfiddle.net/mWMmy/23/ – slobo 2011-04-10 17:09:19

Ack！抱歉。我已經解決了它，但是新的答案有一個警告，正如所指出的那樣。 – Faust 2011-04-11 03:07:57

注意：小提琴似乎與瀏覽器（doctype？）略有不同，左右2px並不是小提琴中需要的，但它們適用於所有瀏覽器，只要有標記。如前所述，如果您在表中添加填充或邊框，則需要調整這些值。 – Faust 2011-04-11 03:09:59

所有你需要做的就是在td上放置一個硬/固定的高度，在td的div上放100％的高度。

來源

2012-07-12 21:05:38 Jason

在表格單元格內垂直拉伸div - IE8

回答

相關問題