3列垂直方向の流体レイアウト、流体の高さ

私は垂直流体ボックスモデルを実現したい

|-------------|
|             |
|header 20%   |
|=============|
|             |
|             |
|content 60%  |
|             |
|-------------|
|             |
|footer 20%   |
|=============|

体の高さを100%と指定すると、うまく動かない。

CSSで垂直方向の流体ソリューションを得るにはどうすればいいですか?

またはJavascriptを使用する必要がありますか

JS:fiddle http://jsfiddle.net/EGesW/5/

3

3 答え

HTMLタグは、ほとんどのブラウザでCSSのDOMの一部としても分類されます。代わりに、あなたのボディスタイルをhtmlにあまりにも似ています

html, body { height:100%; }

^^マシューが言ったように、私にもそれを打つ

3
追加された
どうもありがとうございました。どこでそのようなドキュメンテーション/情報を入手できますか?
追加された 著者 codeAnand,
私が作ったこのフィドルをチェックしてください: jsfiddle.net/EGesW/11
追加された 著者 Niels,
html {
    height:100%;
}
body{
    height:100%;
}
#header{
    background:#FF9933;
    min-height:20%;
}
#content{
    background:#DDD;
    min-height:60%;
}
#footer{
    background:#138808;
    min-height:20%;
}
3
追加された
どうもありがとうございました。どこでそのようなドキュメンテーション/情報を入手できますか?
追加された 著者 codeAnand,
@HerrSerker私はこれをiPhoneで試したところ、 jsfiddle.net/EGesW/22 で動作しました
追加された 著者 codeAnand,
モバイルにはこの問題があります。コンテンツが100%を超えていてもhtmlやbodyのcssの高さが100%の場合、iphoneでスクロールすることはできません。
追加された 著者 HerrSerker,
私はそれを一般的に意味し、特にこの例ではありません.HTMLと本文の100%の高さを持ち、本体のコンテンツが大きい場合は、スクロールできません。体は、私は認識しないので、体の中にオーバーフローがあります
追加された 著者 HerrSerker,
Personnaly私はここ数年前から( w3schools.com/css/default.asp )ここから始めました。また、私はIE 6でHTML 100%をサポートしていないと思う。
追加された 著者 MatthewK,

本文を100%にしたい場合は、 html の高さを100%に設定する必要があります(高さ100%は、親要素の高さが設定されている場合のみ機能します)。

body,html{
    height:100%;
}

Here's an example.

2
追加された
ああ、私はこれを知らなかった。
追加された 著者 HerrSerker,