如何在表格单元格内垂直拉伸 DIV？
我想height: 100%就可以了
但在某些情况下 - 事实并非如此（至少在 IE8 中）
这是一个简单的例子：
一个 3 行表格，包含页眉、内容和页脚；
我希望“内容”单元格内的“内容”DIV 垂直拉伸 100%；
在 FF 和 Chrome 中可以，但在 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/ http://jsfiddle.net/mWMmy/14/
有人能建议解决这个简单问题的方法吗？
它必须在 IE8、FF 任何 Chrome 中工作（IE7 及更早版本并不重要）
并且它必须是基于CSS的（没有javascript）
请不要提出诸如“不要使用表格进行布局”之类的智慧，因为我可以将 DIV 与display: table等等 - 问题是相同的（我在示例中使用了 TABLE、TR、TD，因为这样更具可读性）
您可以从中间 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>
对于您的问题，但总高度是您设置为 height: 20em 时父 div 的高度；
所以如果你想制作一个应用程序来用自动高度填充浏览器客户端
你只有两条路
1-像这样使用框架集
<frameset ROWS="100px,*,100px">
<frame src="header.htm" />
<frame src="content.htm" />
<frame src="footer.htm" />
</frameset>
这将在没有 JavaScript 的情况下实现自动高度，
2- 使用 JavaScript
致以我的问候
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
