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/

div高度100％内部td错误计算在ie和opera中

1 个答案: