jqueryを使用したトップとボトムの分割画面。下半分をページに拘束します。

Question

サイズを変更するための線が上下にあります（上部または下部のいずれかに不動産を追加します）。

基本的に分割画面レイアウトです。しかし、ボトム部分が正しく表示されるようにするには問題があります。ページの上部に表示されているように、ボトム部分のボックスを正確に実行したいと考えています。

次のデモでは、私は私の問題だけでなく、やっているものを基本的にあなたが表示されます：

http://jsfiddle.net/mstefanko/e38bE/67/

私は任意のハードコードされた高さを持っていない（すべてが現在の％で設定されています私の問題を実証するために、それらをフィドルに加えました。

現在、上部と下部のサイズを変更する仕切りは上部のサイズを変更しています。jQuery UI Resizable alsoResize reverseのコードの下にサイズを逆にするコードがあります。私は余分なコードが必要なのかどうかはわかりませんが、これを並べ替えることができないときには、それは価値があると思いました。

また、jquery UIハンドルを正しく取得するために、上部に大きな下余白がありますが、これは私の問題を引き起こしているかもしれませんが、問題を解消するようには見えませんでした。

ご協力いただきありがとうございます！

Answer 1

問題は、固定サイズの複数のdivを1つのより大きな固定サイズのdivに分割しようとしていることですが、他のdivは適合しません。リサイザーハンドルを動かしてフィットさせるとテキストのサイズが変わるとは予想できません。divはどこかに移動する必要がありますので、overflowです。ここではいくつかの提案です：

• コンテナにautoのCSS overflow値を与える（あなたはそれのサイズを変更し、それが収まるように大きすぎるときに、それは自動的にスクロールバーを与える）
• オーバーフロー値を設定し、サイズ変更を取り除く完全に
• 与えるコンテナautoまたはscrollのCSS height値

（サイズは問題ではない場合）