0

マップ (Google)、チャート、およびグリッドを含む Web ページがあります。スプリッターとタブストリップを介して画面を共有します。利用可能なスペースの高さ/幅の 100% に拡大するのは不可能です。

例は 1,000 語以上の価値があります。

問題を示す JsFiddle を削除しました: http://jsfiddle.net/drysg/Rh7cL/ フル ブラウザ バージョン: http://jsfiddle.net/drysg/Rh7cL/embedded/result/

私はあらゆる種類の CSS トリックを試しました (表示レイアウト、ブロック、高さを使用して: 100%、幅: 100%、階層内のすべての幅/高さの明示的な設定。しかし、何も機能していません。説明するために CSS を単純化しました。

次のような純粋な CSS ソリューションを探しています。

  1. 最初にグリッド、チャート、マップを画面全体に拡大します
  2. Browser Resize は、Grid、Map、および Chart を動的にサイズ変更します (優れた WPF や Silverlight アプリのように、利用可能なスペースに縮小します!
  3. 必要に応じて、ウィンドウのサイズ変更イベントに応答する JQuery アプローチを許容します。

よく見ると、実際には 4 つの問題があることがわかります。

  1. マップの高さが必要なスペースの 100% ではありません
  2. Chart & Grid を保持する TabStrip が高さの 100% を占めていません
  3. ChartとGridを保持するTabStripにスクロールバーがあります（スペースを埋める必要があるため、削除したいです）
  4. 私が望むのは、グリッドのスクロールバーが機能することです (そうすれば、TabStrip にスクロールバーが表示されなくなります)

レイアウト階層は次のとおりです。

I. トップ ウィンドウ 1. タイトル DIV 2. スプリッター A. マップ B. タブストリップ i. 表 DIV a. メニュー B. グリッド Ⅱ．チャート

4

1 に答える 1

0

BODY 要素と HTML 要素の両方を に設定{ height:100%; overflow: hidden}し、コメント化された DIV 高さルールを 100% に戻します。

http://jsfiddle.net/t4dzj/1/を参照してください。

于 2012-06-15T20:12:40.077 に答える