絶対位置にある固定サイズのDIV内に表示したいHTMLエディターウィジェットがあります。ただし、DIVの絶対サイズは事前にわかりません。ユーザーがウィンドウのサイズを変更した場合など、サイズが変わる可能性があります。
当然のことながら、エディターにはコントロールと編集可能な領域があります。それぞれに独自のDIVがあります。コントロールが必要なだけのスペースを占有し、編集可能な領域が残りのスペースを埋めるようにしたいです。
テーブルを使用する場合、これは非常に簡単に実現できます。境界線とパディングとマージンをオフにして、各DIVを独自の行のセルにスローし、コントロールDIVの最大高さをいじるだけです。これはどのように見えるかです:
ベーステーブルhttp://img407.imageshack.us/img407/8435/table1.png
ウィンドウのサイズが別の方法で変更された同じテーブルhttp://img264.imageshack.us/img264/6438/table2p.png
スクロールバーを表示せずに、編集可能なセクションが可能な限り多くのスペースを占めることに注意してください。
私はさまざまなCSSの例を試してみましたが、編集可能なDIVを親の高さからコントロールの高さを引いたものにするために、サイズ変更時にJavaScriptを実行しないと何も機能しないようです。
もちろん、親DIVにdisplay:tableを持たせ、子DIVにdisplay:table-row DIVをラップさせ、それ自体にdisplay:table-cellを持たせることもできますが、その場合は、まったく同じです。 TABLE、TR、およびTDを使用しますが、CSSの純度のために10倍醜いです。(なぜわざわざ?)
それで、display:table&friends、TABLE / TR / TD、JavaScriptを直接使用せずに、これを行う純粋なCSSの方法はありますか?言い換えると、純粋なCSSの言い方では、DIV1は可能な限り垂直方向のスペースを占有せず、DIV2は親要素内の残りの垂直方向のスペースを占有しますか?
そうでない場合は、「純粋なCSS」の考え方に同意するのをやめる準備ができています。それは私に十分な悲しみを引き起こしましたが、開発者やエンドユーザーの利益はほとんどありませんでした。