Header <div id="center"> <div style="height:1000px">high content</div> </div> <div"> Header <div id="center"> <div style="height:1000px">high content</div> </div> <div"> Header <div id="center"> <div style="height:1000px">high content</div> </div> <div" />

上と下の未知の高さdivを持つCSSを使用してdivを残りの高さに設定する

ラッパーがウィンドウの高さ(スクロールなし)を塗りつぶし、中央divがスクロール可能にすることは可能ですか?

<div id="wrapper">
  

Header

<div id="center"> <div style="height:1000px">high content</div> </div> <div id="footer">Footer</div> </div>

基本的には、ヘッダーが上端に表示され、フッターが下端に常に表示され、中央にスクロール可能なコンテンツが残っていて、残っている高さを占めるようにします。
ヘッダー、フッター、中央のdivの高さはすべて不明です(pxや%、つまり可変のフォントサイズやパディングは設定されていません)。純粋なCSSで可能ですか?

52
同様に、ヘッダーやフッターが固定されていないレイアウトでは、ヘッダーやフッターの内容を変更したり、エレメットを追加しても、中央divのCSSプロパティには影響しません。
追加された 著者 danial,
あなたはこの質問と同じ本質的なことを達成しようとしていますか?可変的な高さはそれをより厄介にするでしょう。 > stackoverflow.com/questions/ 8555157 /&hellip;
追加された 著者 justis,

4 答え

2014 UPDATE: The modern way to solve this layout problem is to use the flexbox CSS model. It's supported by all major browsers and IE11+.


2012:CSS単独でこれを行う正しい方法は、 display:table display:table-row を使用することです。 IE8以降、すべての主要ブラウザでサポートされています。これは、表を表示するための ではありません。 divsを使用します:

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    height: 100%;
    width: 100%;
    background: yellow;  /* just to make sure nothing bleeds */
}
.header {
    display: table-row;
    background: gray;
}
.content {
    display: table-row;  /* height is dynamic, and will expand... */
    height: 100%;        /* ...as content is added (won't scroll) */
    background: turquoise;
}
.footer {
    display: table-row;
    background: lightgray;
}
<div class="wrapper">
    <div class="header">
        

Header

Header of variable height

</div> <div class="content">

Content that expands in height dynamically to adjust for new content

Content height will initially be the remaining height in its container (.wrapper). <!-- p style="font-size: 4000%">Tall content

Sticky footer

Footer of variable height

</div> </div>
</div> </div>

それでおしまい。 divはあなたが期待するようにラップされています。

76
追加された
ヘッダー要素に触れることができない場合(これは既に表示:表自体です...)、これを行う可能性はありますか?
追加された 著者 andig,
@ダニアルこれは本当に今日私を助け、非常にありがとう。 Operaと同じように動作するようになりました。私はこれを試してきたので、この方法で自分自身に答えるべきだと思います。自分でマークアップを行い、グーグルで様々な解決策を試しています。私はすべてのブラウザで必要なものを行いました。これは非常に参考になるはずのフィドルです。
追加された 著者 pokrishka,
stackoverflow.com/questions/12605816/… はOpera以外のすべてのブラウザで動作しています: jsfiddle.net/Uc9E2
追加された 著者 danial,
コンテンツ(その高さがラッパーの高さよりも大きい場合)がIE(IE10も)でオーバーフローすることに注意してください。
追加された 著者 Boris D. Teoharov,
display:table-row は、適用されているアイテムからすべての罫線を削除します
追加された 著者 danza,
jsfiddle.net/6dbyr これで、次のような洗練された領域を追加することができます。セルは完全な高さを占めます。
追加された 著者 user132837,
アーケード...と大きなブレーカ、洗練されたFirefoxで動作しません。 bugzilla.mozilla.org/show_bug.cgi?id=794644 を参照してください。 stackoverflow.com/questions/12605816/…
追加された 著者 user132837,

overflow:auto を使用すると、これを行うことができます。

デモ

3
追加された
@ダニアル、あなたはフッターとヘッダーの高さを知っていますか? (パーセントまたはピクセルで)
追加された 著者 FakeRainBrigand,
可能であれば、私はそれを行う方法を知らない。ここでの一般的なアプローチは、ヘッダー、コンテンツ、およびフッターにそれぞれパーセンテージベースのサイズを与えることです。
追加された 著者 FakeRainBrigand,
これは display:table display:table-row で行うことができます。 私の答えを参照してください。
追加された 著者 Dan Dascalescu,
あなたの例では、高さを80%に設定していますが、中心のdivの高さはわかりません。残ったスペースを取るだけです。ありがとう
追加された 著者 danial,
いいえ、私はちょうど質問を更新しました。これは、フォントサイズ、パディング、および/または動的に追加される他の要素に依存します。
追加された 著者 danial,

Dan Dascalescu のクロスブラウザソリューション:

http://jsfiddle.net/Uc9E2

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.l-fit-height {
    display: table;
    height: 100%;
}
.l-fit-height-row {
    display: table-row;
    height: 1px;
}
.l-fit-height-row-content {
    /* Firefox requires this */
    display: table-cell;
}
.l-fit-height-row-expanded {
    height: 100%;
    display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
    height: 100%;
    width: 100%;
}
@-moz-document url-prefix() {
    .l-scroll {
        /* Firefox requires this to do the absolute positioning correctly */
        display: inline-block;
    }
}
.l-scroll {
    overflow-y: auto;
    position: relative;
    height: 1000px;
}
.l-scroll-content {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 1000px;
    min-height:100px;
}
<div class="l-fit-height">
    
<div class="l-fit-height-row-content">

Header

</div>
<div class="l-fit-height-row-content l-scroll"> <div class="l-scroll-content">

Foo

</div> </div>
<div class="l-fit-height-row-content">

Footer

</div>
</div>
</div> </div>

3
追加された
これらのクラスをいくらか説明してもらえれば幸いです。
追加された 著者 velis,

あなたが話しているのは、粘着性のあるフッターです。私は行って、もう少し研究をしました。ここで私はあなたのために持っています。

<div id="wrapper" style="height:100%">
<div id="header" style="float:none;">

Header

</div> <div style="overflow:scroll;float:none;height:auto;">high content</div> <div id="footer" style="clear:both;position:fixed;bottom:0px;">

Footer

</div> </div>

これはあなたに粘着性のあるフッターを与えるでしょう。キーは位置です:固定と底:0px; 残念ながら、これはまた、スクロールビュー内のどのコンテンツよりも上にあることを意味します。これまでのところ、これを理解するためのJavascriptしかないようですが、私は探し続けます。

2
追加された
そして、私の研究から、あなたが求めていることをする唯一の方法は、JavaScriptが参照されている高さ、すなわちheight =(page.height - (header.height + footer.height)
追加された 著者 Kevrone,