我正在开发一个电子邮件选择器表单，该表单需要能够扩展到容器的大小，并且还可以容纳随着选择更多地址而增大的“收件人”选择器。我有一个在 Firefox 和 Chrome 中运行良好的解决方案，但在 IE9 和 IE10 中失败。
这是我正在尝试做的说明：
问题的核心是DIV必须是“position:absolute”才能使“overflow-y:auto”工作，并且要在流中定位它，它需要一个“position:relative”的父级。我使用表格是为了让尺寸在两个方向上都能正确拉伸，但是对于任何可以在不使用表格的情况下正确拉伸的人都可以加分。
我在这里把问题归结为一个最小的例子：http: //jsfiddle.net/yh7YD/4/
这是HTML：
<div class="outer">
<table border="1">
<tr class="first-row">
<td class="to-label">To:</td>
<td class="input-wrapper">
<textarea></textarea>
</td>
</tr>
<tr class="results-row">
<td colspan="2" class="results-wrapper">
<div class="results">
<ul>
<li>one</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
<li>two</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
使用这个 CSS：
.outer {
position: absolute;
top: 50px;
left: 50px;
right: 50px;
bottom:50px;
}
.first-row {
height:10px;
}
.results-wrapper {
position:relative;
}
table {
width: 100%;
height:100%;
}
.results {
position:absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: scroll;
}