CSSを使用して枠線レイアウトを作成するにはどうすればよいですか？

Question

私は、固定サイズのヘッダーとフッター、サイドバー、および残りのスペースを埋めるために展開するメインの中心コンテンツがあるWebアプリケーション用の枠線レイアウトを作成したいと考えています。ツールバーとステータスバーのサイズが固定されているブラウザ、サイドバーのサイズが変わる可能性があるブラウザのように考えると、中央のウェブサイトは残りのサイズを満たすように展開されます。

編集：明確にするために、デザイン全体の高さをピクセルで指定したいとします。たとえば、600ピクセルです。次に、コンテンツがスペースを埋めるのに十分な大きさでなくても、サイドバーと中央のdivが展開して空き領域を埋めるようにします。 Webブラウザの類推もここでも使用できます。ブラウザで表示しているページのサイズがブラウザウィンドウのサイズより大きくない場合でも、ブラウザのサイズは変更されません。

CSSでこれを行う方法はありますか？

Answer 1

フッタースティックのための仕事のような音を参照してください方法 - これはすでに古いですが、それでも魅力を作品... the man in blue - footerStickAlt

Similar question here.

そして、あなたが同じを使用している場合、私は確信していますその質問の基準と、それをリンクして検索を実行すると、より多くの情報が得られます。

Answer 2

トライフレキシボックスには、現在の実装が更新されない

http://www.html5rocks.com/en/tutorials/flexbox/quick/

FirefoxやWebKitので動作しますが、それは

十分に良いのですが、あなたはおそらくに類似しているテーブル（でこれを行うことができますフレキシボックス）

が、これは

Answer 3

div { border : 1px solid #d3d3e3 } 

#north { margin:0; padding:1em; }   
#south { margin:0; padding:1em; }   
#east  { margin:0; padding:1em; width:6em; height:22em; float:left; margin-right:1.1em }   
#west  { margin:0; padding:1em; width:6em; height:22em; float:right; margin-left:1.1em }   
#center { margin:0; padding:1em; padding-bottom:0em; }   
#center:after { content:' '; clear:both; display:block; height:0; overflow:hidden } 

<div id="north">North</div > 
<div id="east">East</div> 
<div id="west">West</div> 
<div id="center">Center</div> 
<div id="south">South</div> 

01を役に立てば幸い

ライブリンク：http://jsfiddle.net/marrok/dGw6K/2/

Answer 4

CSSテーブルレイアウトでこれをうまく処理できます。

.borderLayout { 
    display: table; 
    width: 100% 
} 

.borderLayout .top { 
    display: table-row; 
} 

.borderLayout .left { 
    display: table-cell; 
    vertical-align: middle; 
    width: 10%; 
    } 

.borderLayout .center { 
    display: table-cell; 
    vertical-align: middle; 
} 

.borderLayout .right { 
    display: table-cell; 
    vertical-align: middle; 
    width: 10%; 
    } 

.borderLayout .bottom { 
    display: table-row; 
} 

JSFiddle