3列流体スクロールセンターCSSレイアウト

Question

私は現在開発中のアプリケーション用にHTMLとCSSを構築しています。

このアプリケーションには、固定高さヘッダー、固定高さフッター、および残りの領域を占める中間領域があります。

問題は、ヘッダーとフッターが完全に固定され、コンテンツが大きくなりすぎると内容がスクロールするようにしたいという問題です。

ヘッダーとフッターを固定してスクロール可能なコンテンツを取得できましたが、これはスクロールバーがヘッダーの後ろに消えるようにするpush divを使用し、別のオプションではフッターの後ろに消えます。それは100％の高さを与えることなく最大サイズを超えるときに私はスクロールするdivを取得するのは苦労している。ここで

私がこれまで持っているものです。

http://jsfiddle.net/7gmpu/

は、純粋なCSSで可能なこのですか？または、サイズ変更するたびにjavascriptでウィンドウの高さを計算する必要がありますか？

「ソリューション」は近いですか？

Answer 1

要素を固定したい場合は、CSSの配置を使用する必要があります。あなたの現在の解決策はすでに終わっていますが、少し複雑です。

は、次の3個のブロックを持つようにしたいと言う：

HEADER 
CONTENT 
FOOTER 

最も自然な方法は、コンテナ（あなたのウェブサイトが唯一のこれらの3つの要素で構成されている場合は必要ありません）で、それらすべてを入れて、絶対にそれらを配置することです。 HEADERのトップは0、FOOTERのボトムは0です。CONTENTでは、フッター/ヘッダーの高さになるように、上部と下部を調整する必要があります。

あなたは#wrapper、＃ヘッダー、#contentと#footerを使用してのであれば、これはあなたが必要のあるコードです：

#wrapper{position:absolute; top:0;bottom:0;width:100%;} 
#header, #footer, #content{position:absolute; width:100%;} 
#header{top:0; background-color:#faa;height:50px;} 
#content{top:50px;bottom:150px; overflow:auto;} 
#footer{bottom:0px; background-color:#afa; height:150px} 

Demo

EDIT：Your updated demo。固定配置を使用する場合は、高さの値を指定しないでください。 topとbottomを定義して暗黙の高さを使用します。スクロールバーにもoverflow:autoを使用してください。私は以下の変更を行いました：

#mid { 
    background: #222; 
    /* dropped height */ 
    bottom:50px; /* implicit height */ 
    overflow:auto; /* automatical scrollbars */ 
    width:  100%;  
    position: fixed; 
    top:  100px; 
} 

Answer 2

ごくわずかなマークアップで目的の効果を達成することができます。

* { 
    box-sizing: border-box; 
} 

html, body { 
    height: 100%; 
} 

body { 
    padding-bottom: 5em; 
    padding-top: 7em; 
    position: relative; 
} 

body > div#container { 
    position:absolute; 
    top: 7em; 
    bottom: 5em; 
    width: 100%; 
    overflow-y: scroll; 
    min-height: 3em; 

} 

body > header { 
    height:7em; 
    position:relative; 
    margin-top: -7em; 
} 

body > footer{ 
    height:5em; 
    position: absolute; 
    bottom: 0; 
} 

を、あなたが行く準備する必要があります：あなたは次のCSSでそれをスタイリングすることができます

<header> 
    Header 
</header> 
<div id="container"> 
    <article class="post"> 
     A1; 
    </article> 
    <article class="post"> 
     A2; 
    </article> 
    <article class="post"> 
     A3; 
    </article> 
    <article class="post"> 
     A4; 
    </article> 
    <article class="post"> 
     A5; 
    </article> 
</div> 
<footer> 
    footer 
</footer>? 

のように見えるHTMLを考えます。あなたはここに実際の例を見ることができます： header上記のコードで http://jsfiddle.net/ramsesoriginal/Mg4Ad/

は、footer5em7emあると#container面積がダウン3 emに縮みます。