セル内のコンテンツの高さを無視して動的なテーブルの行の高さ

Question

私は3行のテーブルと500pxの固定された高さを持っています。

最初の行の内容は、長さによって異なります。 3番目の行は決して変更されず、常にその内容に合った同じ高さを持ちます。 2行目のセルの高さはを超え、セルの高さを超えた後に隠れるはずの内容の束がです。この行の高さは、最初の行がどれくらいかかっているかだけに基づいている必要があります。したがって、高さに明確にする

：

• 行1 = X（動的）
• 行3 = Y（静的）
• 行2 = 500 - X - Y

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％の高さをとり、表が500％よりもはるかに大きくなるにもかかわらず、表の設定幅（500ピクセル）と同じになるようにします。私は行から高さのスタイルを残すだろうが、それ内のdivはどのような高さがわからない。

現在、私は他のセルの高さに基づいて中間行の高さを設定するためにjQueryを使用しますが、これは最適ではありません。

アイデア？

おかげで、各山車で3つのdivを使用しないのはなぜ

Answer 1

私はこれを3行ではなく2行で解決しました。最初の行は動的で、2番目の行は残りのスペースを占めますが、その後、セルの下部に添付されたdivに追加のコンテンツを分割します。余分なコンテンツはdivの下を流れます。

Answer 2

は、第三セット固定の高さで、（多分あなたはセットの余白をしたい）右完全に一人で最初uoy休暇の「高さ」のCSSを左または。 しかし、私は 'Row 2 = 500-x-y'を理解していません.wchichは、1が500の高さを超えると負の高さになることを意味します。 Chrome、FF、Opera、IE8を満たす必要があります。