我正在制作一个电子邮件选择器表单,它需要能够扩展到容器的大小,并且还可以容纳“to”选择器,随着选择更多地址而增加。我有一个在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;
}