在 ie 和 opera 中计算的 td 内的 div 高度 100% 错误

Question

我正在尝试创建 标题容器布局。标题高度是可变的，容器应始终填充其余空间（宽度、高度）。

IE (9,10) 和最新的 Opera 计算布局表的高度错误，因此出现滚动条。其余浏览器计算正确（Safari、Chrome、Firefox）。

<div class="header-container-layout">
<table border="0" cellspacing="0" cellpadding="0">
    <tr class="layout-hdr">
        <td style="background:#aaa">
            asdasdas asdasd 
        </td>
    </tr>
    <tr class="layout-content" >
        <td style="height:100%;">
            <div class="layout-content-inner" style="background:#ccc;">


            </div>
        </td>
    </tr>
</table>
</div>


.header-container-layout{
    height:100%;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}
.layout-content-inner{
    height:100%;
    position:relative;
    overflow:hidden;
}
table{
    width:100%;
    height:100%;
}

你可以在这里看到情况：http://jsfiddle.net/95und/9/

这个没有javascript有解决办法吗？

谢谢！

编辑：我的问题与滚动条的出现无关，我可以通过溢出来避免它们：隐藏。问题是我想将内容绝对定位到容器的底部。

Answer 1

好吧，将overflow:hidden 添加到.header-container-layout 会使滚动条在Opera 中消失：

.header-container-layout{
    height:100%;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    ***overflow:hidden;***
}

我现在实际上不能非常容易地在 IE 上进行测试，但我怀疑它的行为可能相同。

当然，唯一的问题是，如果您的内容特别长，它可能会被截断。我猜这取决于你的计划。

http://jsfiddle.net/yochannah/95und/10/