html - 固定ヘッダー、固定フッターの動的コンテンツ

Question

動的コンテンツに苦労しています。それでは、写真で説明しましょう：

したがって、私のhtmlは次のようになります。

<div id="header"> ... </div>

<div id="container">
    <div class="block"> ... </div>
    <div class="block"> ... </div>
    <div class="block"> ... </div>
    <div class="block"> ... </div>
</div>

<div id="footer"> ... </div>

私の質問: コンテナーを流動的にし、ヘッダーとフッターを修正するにはどうすればよいですか? コンテナー内のブロックは 50% の高さと幅に設定されているため、コンテナーのみが 100% の高さである必要があります (- 固定ヘッダーとフッター)。

Answer 1

プロパティでこれを行うことができbox-sizingます。

そのようです：

フィドル

(ここで使用する例では、高さ 64 ピクセルのヘッダーと高さ 30 ピクセルのフッターを想定しています)

マークアップ

<header>header</header>
 <div class="container">
     <div id="content">
         <div class="block">block1</div><!--
         --><div class="block">block2</div><!--
         --><div class="block">block3</div><!--
         --><div class="block">block4</div>
    </div>    
</div>
<footer>footer</footer>

CSS

html,body
{
    height: 100%;
}
header,footer,div
{
   width: 100%; 
}
.container
{
    height: 100%;
    background: pink;
    margin: -64px 0 -30px;
    padding: 64px 0 30px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#content {
    overflow:auto;
    height:100%;
}
.block
{
    width: 50%;
    height: 50%;
    display: inline-block;
    border: 1px solid yellow;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}
header
{
    height: 64px;
    background: purple;
    position: relative;
    z-index:1;
}
footer
{
    height: 30px;
    background: gray;
    position: relative;
    z-index:1;
}

Answer 2

このような

動作デモ

CSS

*{
    margin:0;
    padding:0;
}
#header{
    height:100px;
    background-color:red;
    position:fixed;
    top:0;
    width:100%;
}
#footer{
    height:100px;
    background-color:green;
    position:fixed;
    bottom:0;
    width:100%;
}
#container{
    background-color:#F7F7F7;
    width:100%;
    top:100px;
    position:relative;
}
.block{
    width:50%;
    background-color:gray;
  float:left;
}

Answer 3

質問に のタグを付けましたtwitter-bootstrap。これは、よりブートストラップに適したアプローチです。

デモ: http://bootply.com/render/88297

コード: http://bootply.com/88297

これは、やや標準的な BS ヘッダー/ナビゲーションと固定フッターを使用します。次に、中央のコンテナは を使用しtable、table-rowそれtable-cellに応じて中央のボックスのサイズを 50/50 にします。

.center-container {
  height:100%;
  display: table;
  width:100%;
  margin:0;
}

.center-row {
  height:50%;
  width:100%;
  display: table-row;
}

.center-row > div {
  height:100%;
  width:50%;
  display: table-cell;
  border:1px solid #eee
}