タイトル、オプションのツールバー、本文、およびオプションのフッターを含むように、YUI ダイアログ (別名オーバーレイ) をサブクラス化しました。ダイアログは、ユーザーがサイズ変更することもできます。
これを示すフィドルがありますが、その根性は次のとおりです。
<div class="outer">
<div class="hd"></div>
<div class="tb"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
私が求めているルールは次のとおりです。
- 外側の最小の高さは hd.height と同じです
- hdの高さは固定です
- tb、bd、および ft の高さは可変です
- tb と ft はラップする必要があります
- tb と ft は、可能であれば bd を犠牲にして完全に表示する必要があります
- tb と ft を完全に表示するのに十分なスペースがない場合は、残りのスペースを 2 つの間に均等に割り当て、bd を非表示にします
- bd がそれを含む div より大きい場合、x/y オーバーフローはスクロールする必要があります
私はこれをプログラムで実行しましたが、IE 7 と 8 にはいくつかの問題があります (パディング、マージン、ボーダーがさらに複雑になるため、ここで説明するよりもすべてが少し複雑です)。 FFとIE。
ブラウザには強力なレイアウト エンジンが搭載されているため、CSS と HTML について十分に理解していないため、レイアウト エンジンが機能するようにコードを記述できません。
CSS/HTML の魔法使いを使ってこれを行うことはできますか?