在表格单元格内垂直拉伸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

回答

相关问题