動態表格行高忽略單元格中的內容高度

第一行的高度可能有所不同，以適應長度不同的內容。第三行從不改變，始終具有相同的高度，這符合其內容。第二行有一堆內容將超過單元格高度，並應在超過單元格高度後隱藏。此行的高度應完全基於第一行佔用多少。

所以要對高度明確：

行1 = X（動態）
行3 = Y（靜態）
行2 = 500 - X - ý

我發現了一種在Firefox中執行此操作的方法，但它在IE 8中不起作用。現在我正在使用JavaScript在事實之後修復它，但如果可以純粹使用CSS/HTML 。

這裏是我現在如何工作的基本翻譯。

<table cellpadding="0" cellspacing="0" id="table"> 
    <tr><td id="row1">Row 1 Content</td></tr> 
    <tr><td id="row2"><div>Row 2 Content. Lots more content here should not cause the table to expand.</div></td></tr> 
    <tr><td id="row3">Row 3 Content</td></tr> 
</table> 

#table{height:500px;width:200px;} 
#row1,#row3{height:1%} 
/* ^^ force cell heights to fix content */ 
#row2{position:relative;height:99%} 
/* ^^ a height must be specified to get the absolutely positioned div to assume the cell's height */ 
#row2 div{position:absolute;height:100%;width:200px;overflow:hidden;top:0;left:0;} 
/* ^^ allows content to overflow the cell without causing the cell to expand */

不幸的是，這在IE中不起作用。 IE將佔用第2行的99％高度，並使單元格與表格的設置寬度（500px）一樣高，即使這會導致表格遠大於500％。我會離開高度風格，但其中的div不知道高度是多少。

目前我使用jQuery來設置中間行的高度，基於其他單元格的高度，但這不是最優的。

想法？

感謝

來源

2011-09-12 smdrager

我解決了這個不使用3行，而是2行。第一行是動態的，第二行佔用剩餘空間，但是隨後將附加內容拆分爲附着在單元格底部的div。額外的內容只會在div下流動。

來源

2012-04-04 16:40:25 smdrager

爲什麼不使用三個的div向左或向右完全浮動的每個（也許你想設置頁邊距），其中第一uoy休假「高度」 CSS獨自一人，在第三組固定的高度。但我不明白'行2 = 500 - x - y'這意味着如果1超過500的高度，它將是負高度。這應該滿足Chrome，FF，Opera和IE8。

來源

2011-09-12 18:35:56

總高度不會超過500. Div's沒有表格所具有的高度。在你的例子中，第2行的高度不會變化，以使3一起等於500。 – smdrager

動態表格行高忽略單元格中的內容高度

回答

相關問題