0

絶対位置にある固定サイズの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」の考え方に同意するのをやめる準備ができています。それは私に十分な悲しみを引き起こしましたが、開発者やエンドユーザーの利益はほとんどありませんでした。

4

4 に答える 4

1

非常に多くのオプションしかありません。テーブルを使用せずにテーブルのような動作が必要な場合は、display:table を使用して、後で気が変わるオプションを自分に与えてください。そうすれば、マークアップは見苦しくなりますが (主観的)、私にはより理にかなっています。最終的にいくつかの要素が追加されますが、特定のレイアウトに縛られることはありません。

マークアップを気にしない場合は、トリガーを引いてテーブルを使用してください。これは短期的にはより簡単になります。

私の質問: JavaScript を使用したくない場合、エディター コントロールをどのように実装しますか?

于 2009-03-30T18:18:21.083 に答える
1

この質問は、最近多くの人が直面している問題を示しています。「表形式のデータにはテーブルのみを使用する」というルールに従うか、単にテーブルを使用して作業の 3 分の 1 を行うかです。これが難しい決定でさえあるという事実は、私たちがどれだけ標準に夢中になっているかを示しています。基準を忘れて、表を使用して、きれいに、そして簡単にやり遂げましょう。W3C に問題がある場合は、より良い代替案を作成した直後に文句を言うことができます。

于 2009-03-30T16:02:01.737 に答える
0

私は 2 番目の perfectDay の回答を希望しますが、夢中になって、どのように見せたいかを説明してみてください。ascii-art またはグラフィックへのリンクを使用する場合もあります。そのため、どのレイアウトを実現するのに役立ちたいかがわかります。

また、私は最近 (再び) 眠っていないことも付け加えておきます。そのため、あなたが何を達成するために私たちに何を望んでいるかについて、非常に明確な説明を見逃していた場合は、心からお詫び申し上げます。:)

于 2009-03-30T16:41:10.380 に答える
0

私の知る限り、幅/高さにパーセンテージを使用するとうまくいくはずです。

于 2009-03-30T15:56:01.657 に答える