我基本上需要实现的是有一个元素(div,span,table,等等)消耗100%的'父高度',如果内容更高则显示滚动.
问题是,只有奇怪的铬和IE可以正常工作height:100%; overflow: auto;.标准中的Firefox,Opera和IE(任何IE 7+,任何"标准")都会忽略溢出并将html元素拉伸到父级大小以下.如果我设置固定高度它可以工作,但我无法确定渲染前的可用高度,有多个可能的值.
简化示例(jsFiddle为此):
<body>
<div id="parent">
<table id='container'>
<tr>
<td>
<div id='element-in-question'>
<!--Content long enough to stretch the div-->
</div>
</td>
</tr>
<tr>
<td id='footer-cell'>
<div id='footer'>I'm footer<div>
</td>
</tr>
</table>
</div>
</body>
CSS:
#parent { height:500px; width:500px; position:absolute; }
#container { height: 100%; width:100%; }
#element-in-question { height:100%; width:100%; overflow: auto; }
#footer-cell { height:30px;}
#footer { height: 30px; }
在真正的应用程序中,所有这些东西都在iframe中运行,表用于呈现页眉和页脚等等.请不要建议停止使用表格,它是100多个需要注意的地方的遗留应用程序.CSS唯一的解决方案将是理想的.
还有一点:它应该适用于Chrome,IE10标准模式.不支持FF,Opera和Safari,IE9及以下版本的处理方式不同.
更新:大约有十个不同高度的页脚,理想情况下解决方案不应该依赖于固定的页脚高度.
干得好：
问题是它将height: 100%;填充下一个定义的容器。无论出于何种原因，表都不被视为用于此目的的有效容器。因此，我们需要做的是利用表格布局的一些奇特之处。
position: absolute;
top:5px; left:5px;
right: 5px;
bottom: 40px;
overflow: auto;
border: 1px solid green;
background-color: #eee;
无需在 上进行相对定位td。别问我为什么，也许比我更有见识的人可以插话。
无论如何，这样我们就可以强制它扩展以填充一定量的空间，同时仍然允许：
真心希望这会有所帮助；如果没有，我很乐意再试一次。
更新
你说 javascript 不是你想要的方式，但这里有一个使用 jQuery 的简短解决方案，它实际上可以解决问题：
$('td > div').each(function() {
var t = $(this);
var text = t.html();
t.hide();
t.height(t.parent().height());
t.show(text);
});
为什么这有效：
在 100% 高度起作用之前，需要div其父级具有定义的高度，但这不是您的选择，因为您已经声明这都是动态内容。没问题。我们只需要 jQuery 将计算出的高度推送到div浏览器已经渲染出来的高度即可。很简单，对吧？
嗯，没那么快。Div 并不意味着受表格单元格的限制，至少在理想情况下是这样。我们已经在 中拥有了一个逻辑上的、独立的容器td，并且如果它已经有大量内容溢出了它的边界，那么它div并不太关心它的高度是多少。td当我们去查询该高度时td，无论它实际上是什么，它都会报告它比它包含的元素大。因此，如果您在注释掉我们清空 的行后查看小提琴div，您会发现td错误地将自身报告为几乎 900 像素高。
那么我们该怎么办？
好吧，我们将这些内容从div. 现在它只是一个外壳，而且在任何情况下它都会比它的容器小。这意味着当我们查询它时，它td不会谎报它的大小，因为它自信地包含它的子项。
一旦我们从 TD 得到真相，我们就告诉 TDdiv其父级报告的大小就是它需要的大小，并将其返回给它的内容。
瞧。现在你已经有了一个真正尊重其父级的div对象。要是真正的孩子也这么容易就好了。