可変高さのヘッダー、コンテンツ領域、およびフッターを持つページがあります。私は、コンテンツ領域が常にビューポートを埋めるようにして、必要に応じてコンテンツに合わせて縦方向に拡大したいと考えています。固定高さのヘッダーでこれを行う例がたくさんありますが、高さが分からない場所はありません。CSS：可変高さのヘッダーで100％の高さのコンテンツ領域
IE 6,7,8、Firefox 3.x、Safari 4では、解決策が必要です。これは純粋なCSSで行うことができますか？私は、テーブルベースのレイアウトに乗り換えて頼る必要がありますか？
EDIT： さらに、コンテンツ領域内に要素を配置し、コンテンツ領域の高さ全体（ビューポートの高さ - ヘッダーの高さ - フッターの高さまたはそれ以上）に拡張できるようにする必要があります。私たちが表示したいコンテンツの中には、 "ヘッダー"と "フッター"のセクションがありますので、私が本当に探しているのはネスト可能なソリューションです。
オクラホマ分の高さのCSSプロパティが動作しませんので、:)
私は今、実際のHTMLファイルをいじって、私は、私は方法を見つけたと信じています。
.header-footer
{
height: 10%;
background-color: lightYellow;
display: table;
width: 100%;
}
.container
{
margin-left: auto;
margin-right: auto;
height: 80%;
width: 100%;
display: table;
}
.inner
{
background-color: lightPink;
height: 100%;
}
<div>の下や他のものの上にきれいに座っていることを確認する
display: tableプロパティを使用します。
注：ページの各要素にheightプロパティを設定する必要があります。それは私が選んだ10％の大きさである必要はありませんが、少なくとも何かはあります。高さの値より大きい要素にコンテンツを挿入したら、それを展開する必要があります。
私はこれがあなたに合ったかどうかを確認するために調べることがあなたのために2つの別々のHTMLページを作成しました：
うまくいけば、これはあなたが探しているものです。
おかげ
IE6とIE7がdisplay：tableをサポートしていないことを考えれば、これはまだIE6で機能していることに驚いています。垂直スクロールバーがスクロールしていますいくつかのピクセルが、私はそれがちょうどデフォルトのパディングを取得していると思う。ディスプレイの設定は本当に必要ですか？私はもっと時間があるとき、私はこのいくつかで遊ばなければならないでしょう。 – Annabelle
'display：tables'は、各divがテーブルであるかのように動作することを確認します。あなたがそれを持っていない場合、コンテンツがその内部で拡大するにつれてdivが拡張されることはありません。 Firebug（Firefoxアドオン）を使用している場合は、テストページの 'display：table'プロパティを無効にして、自分自身で確認できます。 – mlevit
@mlevit：2つのレビュームサイトの例がダウンしています。 jsfiddleを作成するためのケア？ –
ヘッダーのサイズを変更する場合は、相対的な高さを使用します。コンテンツは既にビューポートに垂直に塗りつぶされます。
内容パネルは、その内部に十分な "内容"があり、背の高い部分を引き伸ばす場合にのみ、ビューポートに塗りつぶします。私は、ビューポートの高さからヘッダーの高さを差し引いた高さが空の要素であっても、その高さを最小にします。 – Annabelle
ヘッダー、コンテンツ、フッターにmin-height CSSプロパティを使用できます。
.header-footer
{
min-height: 20%;
}
.content
{
min-height: 80%;
}
あなたがビューポート全体を埋めることができmin-height: 100%その方法を持っているために、両方の<html>と<body>タグを設定していることを確認してください。
これにより、ページが必要に応じて拡張されますが、最低100％の滞在が可能になります。
おかげ
min-heightの問題は実際には要素の高さを設定しないため、高さが100％の.contentに何かを追加して内容を満たすことができないことです。 私が本当に必要とするのは、自分自身の中に入れ子にすることができる解決策です。私はその効果について私の質問を編集しました。 – Annabelle
このソリューションは動作しませんか？ http://peterned.home.xs4all.nl/examples/csslayout1.html –
私は、このオプションを試して一日を過ごしたと奇数そう多くは、私の専門家の助言が今、このあること行き止まりヒット：あなたはそれが間違って設計さ
。
可変高さヘッダーを完全にスキップします。それはとにかくダムのアイデアです。やった。私のためにうまくいった。今私は非常に簡単なDOMクモの巣の誇りに思う所有者であり、スタックオーバーフローにつながるハードルはありません。
このフィドルをご覧ください。http://jsfiddle.net/qH6K3/
<div id="a">
<div id="b1">BOX1</div>
<div id="b2">BOX2</div>
</div>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html,body{height:100%}
#b1 {
background-color: red;
height: 45px;
width:100%;
}
#b2 {
background: blue;
height: 100%;
width: 100%;
}
#a { height: 100%; padding-bottom: 45px; }
CSSのためにこれを試してください：http://jsfiddle.net/K64Mm/6/ 可変高さ、コンテンツの100％の高さ（でも100％の高さをiFrameに対応）、タッチデバイス上でスクロールなし余計スクロールバー、。
<div class="wrapper">
<div class="top topBar">
</div>
<div class="content">
<iframe scrolling="yes" src="http://www.zeffirino.com"></iframe>
</div>
</div>
html, body { width: 100%; height: 100%; overflow: hidden; margin: 0px; padding: 0px; }
.wrapper { width: 100%; height: 100%; padding-bottom: 45px; -webkit-overflow-scrolling: touch !important; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.top { height: 45px; background-color: red; }
.content { height: 100%; width: 100%; overflow: auto !important; }
.content iframe { display: block; border: none; width: 100%; height: 100%; }
Dupe？ http://stackoverflow.com/questions/1211331/how-can-i-convert-this-table-tis-table-based-layout-to-css – cletus
停止支援IE6 – Jason
これはjavascriptなしで達成するのは難しいでしょう。ストレッチするコンテンツがない場合でも、コンテンツ領域がヘッダーを引いた全体のビューポートを占めるようにする理由はありますか？あなたは正確に何を達成しようとしていますか？ – kmiyashiro