web-dev-qa-db-ja.com

CSSスティッキーヘッダー/フッターと完全に引き伸ばされた中央領域？

CSSを使用すると、ページがsticky header and footerのときはいつでも、永久に表示されるscrolling or notのページを簡単に取得できます。オンラインでいくつかのサンプルを見つけましたが、さらに必要なのは、ブラウザのサイズに関係なく、中央のコンテンツ領域を100% stretched area between header and footerにする必要があることです。

つまり、私が見つけたサンプルのほとんどは、ヘッダーとフッターを正しくスティッキーにしています。しかし、these are just floatingそして実際にはcovering the Top and Bottom parts of the 'middle' content areaです。それは私が本当に望んでいることではありません。

enter image description here

cssheaderresponsive-designfootersticky
11
夏期劇場

3つの要素すべてに絶対位置を使用できます。

#header,#footer,#content { position:absolute; right:0;left:0}

#header{
   height:100px; top:0;
}
#footer{
  height:100px; bottom:0;
}
#content{
  top:100px;
  bottom:100px;
  overflow:hidden; /* use this if don't want any window scrollbars and use an inner element for scrolling*/
}

デモ： http://jsfiddle.net/RkX8B/

14
charlietfl

上記のソリューションは、境界線、マージン、パディングのない非常に単純なレイアウトで機能します。あなたがネット上で見つけるであろう多くの、多くの解決策はこれのために働くでしょう。

ただし、Divのいずれかまたはすべてに境界線、マージン、および/またはパディングを追加するだけでは、ほとんどすべてのソリューションが完全に崩壊します。

フレックスボックス（CSS display：flex;）はこれに対して非常に強力であり、境界線、マージン、および/またはパディングの任意の組み合わせで完全に機能します。

固定サイズ、パーセンテージサイズ、または各内部Divに「残っているもの」を使用して、画面スペースを必要な数のDivに分割できます。これらは任意の順序にすることができるため、ヘッダーやフッターだけに限定されません。それらは、垂直方向ではなく水平方向にも使用でき、次に使用できます。

したがって、たとえば、固定サイズのヘッダー、20％のフッター、および動的にサイズ設定されるそれらの間に「残っているもの」のクライアント領域を含めることができます。そのクライアントエリア内に、たとえば、クライアントエリアの左端にパーセンテージ幅のメニューバー、その隣に固定幅の垂直仕切り、および「残っているもの」を占めるクライアントエリアを配置できます。その右側に。

これがFiddleこれをすべて示すためです。関連するCSSは非常に単純です。 CSS Flex Box（display：flex;）Borders/Margin/Paddingを使用したデモンストレーション

たとえば、含まれているDivをそれぞれ水平または垂直に流すコンテナを作成する2つのCSSクラスを次に示します。

.HorFlexContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1; /* this essentially means "use all parent's inner width */
}
.VertFlexContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex: 1; /* this essentially means "use all parent's inner height */
}

ただし、上記のFiddleは、実際にはすべてを示しています。

参考までに、Chris Coyierによるこの優れた記事を参照してください： Flexboxチュートリアル

これがすべて役立つことを願っています！

4
BRebey

あなたはおそらく「位置：固定」を探しています。プロパティ、およびヘッダーをトップに設定：0;下部へのフッター：0;また、ヘッダーとフッターのスペースを考慮して、「コンテンツ領域」へのパディングを検討することもできます。

私の頭のてっぺんからあなたは次のようなものを持っているでしょう：

header { position: fixed; top: 0; height: 100px; }
footer { position: fixed; bottom: 0; height: 100px; } 
#container {  padding: 100px 0; }

コンテナで何らかの背景を使用していて、それを引き伸ばしたい場合、高さ：100％;すべき...

しかし、私はこの種のレイアウトを使用する良い方法を見つけたことがありません... = \

2
rafaelbiten