3つのセクションに分割された1つの100％高さの列：2つの固定された流体と1つの流体

Question

サイドバーを作成するためにウィンドウの高さの100％を占める単一のdivを作成する必要があります。かんたんだよ。しかし、その列を3つに分割する方法があります。固定された高さの第1セクションと第3セクションで、ロード時の残りのスペースを埋めるように拡張し、ブラウザがJavaScriptだけでリサイズされたときにjavascriptに頼る必要はありませんか？

Answer 1

あなたはサイドバー内の3つのdivを固執し、サイドバーの「相対」のCSSの位置を持っている場合は、次のように、あなたは3つの内側のdivのためのCSSを設定することができます。

#divTop { 
position: absolute; 
top: 0px; 
left: 0px; 
right: 0px; 
height: 120px; 
} 
#divMiddle { 
position: absolute; 
top: 120px; 
bottom: 120px; 
left: 0px; 
right: 0px; 
height: auto; 
} 
#divBottom { 
position: absolute; 
bottom: 0px; /* EDIT: corrected from 120px; */ 
left: 0px; 
right: 0px; 
height: 120px; 
} 

Answer 2

を私はあなたが答えを受け入れ知っています。私は将来の参考のためにこれを追加しています。あなたはまた、CSS display:tableスタイルであなたが望むことを行うことができます。 IE7ではサポートされていませんが、おそらくあなたは気にしません。

は、コンテナのdivを使用して、このような3つのdiv、：

<div id='container'> 
    <div id='col1'> <h1>content for col1</h1> </div> 
    <div id='col2'> <h1>content for col2</h1> </div> 
    <div id='col3'> <h1>content for col3</h1> </div> 
</div> 

CSSは次のようになります。

#container { 
    display:table; 
} 
#container > div { 
    display:table-cell; 
    padding:4px 8px; 
} 
#col1 { 
    width:160px; 
    background-color:LightGreen; 
} 
#col2 { 
    background-color:LightBlue; 
} 

#col3 { 
    width:240px; 
    background-color:LightPink; 
} 

http://jsfiddle.net/CtEya/embedded/result/