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和歌劇

回答

相關問題