2

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

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有没有解决方案？

谢谢！

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

4

1 回答 1

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/

于 2013-10-27T12:26:51.730 回答