div高度100％在td错误计算在ie和歌剧

我想创建一个标头容器布局。标题高度是可变的，并且容器应该始终填充剩余空间（宽度，高度）。div高度100％在td错误计算在ie和歌剧

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的这个的解决方案？

谢谢！

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

来源

2013-10-27 George Mavritsakis

嗯，考虑到这进一步，我和内联样式在寻找一个基于表格的布局...如何绑你到特定的标记？ – yochannah

我很乐意提供意见！ –

好，加入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-27 12:26:51 yochannah

这正是我的问题。我可以添加溢出：隐藏，但我想在容器内的绝对位置内容，并将在任何情况下隐藏。看到这里：http://jsfiddle.net/95und/12/ –

@GeorgeMavritsakis啊，好吧...我猜，既然你说头高度是可变的，你不能做一个负边缘粘脚步技巧像http://ryanfait.com/sticky-footer/ – yochannah

恐怕不是。实际上，目前我已经使用javascript和绝对定位实现了标题容器布局，所以当标题高度发生变化时，我重新计算位置。我正在寻找一种更自然的方式来自动处理标题大小的变化。 –

div高度100％在td错误计算在ie和歌剧

回答

相关问题