0

次のような構造のレイアウトを作成しようとしています。

  • 北ペイン
  • 中央のペイン
    • ヘッダー div
    • ノートブックのようなタブ パネル
      • 少なくとも 1 つのタブで
    • フッター div

ヘッダー div とフッター div は常に表示されている必要があります。タブは残りのスペースをすべて使用し、必要に応じて垂直スクロール バーを表示する必要があります。

これが私がしたことです：https://jsfiddle.net/mguijarr/y57v3nkf/

overflow:hidden中央のペインに 設定しheight: 100%、可能な限り大きくなるようにタブパネルに設定しようとしましたが、下のスペースを食べています（つまり、フッターのdivは表示されません）。

レイアウトを修正するにはどうすればよいですか?

4

2 に答える 2

1

フッターはそこにあります。div#tabs問題は、外側の div があるため、 with height: 100% を設定できないことですoverflow:hidden

コンテナと同じ高さになりますが、フッターは と同じレベルにあるため、には があるdiv#tabsため、非表示になります。div.ui-layout-centeroverflow:hidden

最初の解決策: の高さをdiv#tabsより低いパーセンテージに変更します。

   <div style="margin-bottom: 10px; height: 100px; background: #ffff00;"></div>
   <div id="tabs" style="height: 40%; overflow: auto">
        content
   </div>
   <div style="background: #ff0000; height: 100px; ">footer</div>

https://jsfiddle.net/y57v3nkf/1/

2 番目の解決策として、外側の div のオーバーフロー オプションを自動に変更します: https://jsfiddle.net/y57v3nkf/2/

3 番目の解決策 (Jquery ブルート フォース): 外側の div を高さ 100% に設定します。

$(document).ready(function(){
   var outerDivHeight = $('div.ui-layout-center').height();
   var tabDivHeight = outerDivHeight - 100 - 100 -10;

   $('#tabs').height(tabDivHeight);
});

https://jsfiddle.net/y57v3nkf/3/

このソリューションの問題:

  • あなたは計算をしなければなりません。
  • ページの読み込み時に正しい高さを取得しますが、ページのサイズが変更された場合は取得しません。

ヒント: パーセンチュアルに移行: 固定サイズの div とパーセンチュアル div がある場合、これらのレイアウトは非常に扱いにくくなります。完全にレスポンシブにするには、すべてのレイアウトの考え方をパーセンテージでやり直す必要があります。例:

|-------------100%-----------------|
|---20%----|------------80%--------|
|....|.....|.....|.................|
于 2015-04-02T13:23:44.873 に答える