#left、#center、#right の 3 つの div を、特定の幅 (300px など) を持つ同じ行に配置したいと考えています。
#left と #right にはコンテンツがほとんどなく、それぞれ 50px と言って、完全に表示しています。
#center には 400px などの多くのコンテンツがあり、行の残りのスペース内にできるだけ多く表示したいと考えています。このため、#inner 内に #center のコンテンツを含めました。
#left と #center を左に、#right を右にフロートさせました。
<div id="left">
LEFT
</div>
<div id="center">
<div id="inner">
LONG CONTENT ...
</div>
</div>
<div id="right">
RIGHT
</div>
質問 1: CSS を介して #center div がライン上の利用可能な残りのスペースをすべて占めるようにする方法はありますか? #左と #右、それぞれ 50px) ?
質問 2: CSS による解決策が見つからず、jQuery を使用して残りの使用可能なスペースを動的に計算しました。これは、IE9 を除くすべてのブラウザーで問題なく動作します。
IE9 の問題は、サブピクセルの精度があり、jQuery が要素の次元に対して整数値しか返さないことです。
例を次に示します。IE9 は #left を 50.5 ピクセルの幅と見なしますが、jQuery は 50 ピクセルと見なします。この違いにより、IE9 ではレイアウトが崩れます。
JavaScript を使用して使用可能なスペースを計算する必要がある場合、この IE9 の問題を解決するにはどうすればよいですか?