ヘッダーとフッターの間のサイズサイジング

Question

私はページを継承していますが、手作業で配置された多数の要素と一緒にスローされたものがあります。私は物事をきれいにするためにしばらく前にいくつかの変更を加えました（要求の大部分を占めるブラウザ間で一貫して見えるようにしました）。さまざまなアスペクト比の環境でこのページが使用されているため、ページのサイズを多かれ少なかれ適切に調整する方がはるかに良いと判断しました。私の目標は、下のセクションに固定された高さを設定し、スペースを埋めるためにテキストエリアを拡大し、次に垂直スペースの残りの部分を消費するようにしました。私はfooterを％heightに設定し、内容を100％マイナスしてこれを達成しましたが、ここではfixed height footerを取得しようとしています。私は彼らが成功しなくてもうまくいくようなサンプルをいくつか追跡しました。 Here's a modified JSfiddle where I'm currently at。

次のように私は現在とされて働いているものにCSSの最も関連性の高いレベル（ページ全体のためにjsfiddleを参照してください）：

html, body { 
    height:100%; 
    margin: 0; 
} 

#page { 
    position: relative; 
    width:  100%; 
    height:  100%; 
    background: black; 
    text-align: center; 
} 

#titleBar { 
    display: table; 
    width:100%; 
    height: 60px; 
    background:lightgray; 
} 

#mapWrapper { 
    background:lightblue; 

    position:relative; 
    margin-bottom: 250px; 

    /* need to specify some sort of height to get this to appear*/ 
    /* would be great if I could say "100% - 60px - 240px" */ 
    height:200px; 
} 

#entireBottomBar { 
    position:absolute; 
    bottom:0; 
    left:0; 
    height:auto; 
    width:100%; 
    margin-top: 0; 
    margin-bottom: 0; 
} 

を明確にするために、どのように私は地図のdivを埋めるために拡張することができますヘッダーおよび/またはフッターの後ろを覆うことなくページの完全な垂直高さ。私はカップルの段階でこれを達成することができました

Answer 1

：

1. ラップ上位2つのdiv 1 upperstuffdiv
2. における下境界線とサイズの境界線ボックスにupperstuffdivセット、フッターのサイズ、ボックスサイズをborder-boxに変更します（100％の高さはフッター専用のスペースを減算します）
3. 同様に、uperstuffdiv内では、ヘッダーのサイズの上に境界線を設定しますタイトル）
4. サイズを変更してサイズを100％にするld上の境界線が正しく表示される
5. タイトルのdivを位置に変更しました。地図の上の境界線をレンダリングするためにfloatまたはz-indexを取得できなかったため固定されました。

私はまだ方法論の代替アプローチまたはイン/アウトを聞くことに興味があります。