聖杯のレイアウトを達成するには、3つの方法

聖杯は非常に一般的なレイアウトCSSレイアウトです。要件：

各上部及び下部は、全てを画面の幅を占有します。
上部と下部の間の部分は、3列のレイアウトです。
一定の幅の両側に3列のレイアウト、中間部の全域が自動的に入力されます。
領域の高さの中央部の高さは、3つのカラムの最高です。

私は、聖杯のレイアウトを達成するための3つのメソッドを使用して、フローティング、フレキシボックスとCSSグリッドあります。

HTMLコンテンツ：

<div class="header">这里是头部</div>
<div class="container"> <div class="middle">中间部分</div> <div class="left">左边</div> <div class="right">右边</div> </div> <div class="footer">这里是底部</div>

フロート：

1.充填の3つの列

このステップ、一緒にフロートの上側を防止するために、エリア以下底部領域に第一の透明フロート。
さらに：、左右3つの領域フローティング配置されています。一定の幅の約2の領域は、中間部の幅は100％に設定されています。

[中間]は[コンテナ]のすべての部分、及び2つの領域を占有し、フローティング関係するので、ダウン達成[コンテナ]の関係パディングを設定する最初のステップから、しかし、右下の左にプッシュされ左右の領域の残りの1つ、およびその周囲の領域の幅のそれぞれ。

.header,.footer{
    height:40px;
    width:100%; background:red; } .footer{ clear:both; } .container{ padding-left:200px; padding-right:300px; } .container div{ float:left; } .middle{ width:100%; background:yellow; } .left{ width:200px; background:pink; } .right{ width:300px; background:aqua; }

左側の領域を移動する2

次のことは行くマージン内の2つの空いたスペース程度の領域に移動することがあります。

左側の最初の動きに加え、新しいスタイルのmargin-left：-100％。従って、フローティング関係するので、右側の列は自動的に左側に移動しながら、[中間]左側のブロックの左側に、織り込まそれを置くために移動。次に幅を相殺することを起こる左の列、オフセット、[コンテナ]を得るために、このステップは相対位置に設定されている与えます

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{ postion:relative; float:left; } .middle{ width:100%; background:yellow; } .left{ width:200px; background:pink; margin-left:-100%; right:200px; } .right{ width:300px; background:aqua; }

右に移動します3.

ケース・バイ・ステップの原則であり、右側の領域は、最大欺い、それ自体を行に負の外部から同じ幅を設定します。

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{ postion:relative; float:left; } .middle{ width:100%; background:yellow; } .left{ width:200px; background:pink; margin-left:-100%; right:200px; } .right{ width:300px; background:aqua; margin-right:-300px; }

フレキシボックス弾性ボックス実装：

彼らはもはやそれを書くために、左から右の順序を追跡するだけで必要性をfloatに関連しているため、HTMLを書いている時点では、非常にシンプル。その上に1〜約2符号化された領域、フレックス属性セットの中央領域の幅。

.header,.footer{
    height:40px;
    width:100%; background:red; } .container{ display: flex; } .middle{ flex: 1; background:yellow; } .left{ width:200px; background:pink; } .right{ background: aqua; width:300px; }

CSSグリッドグリッド

グリッドは、2018年の初めのように、ブラウザの大半はすでにCSSのグリッドをサポートする、新しいレイアウトです。
原理はページの領域だけで碁盤のように、1のグリッドに分割されています。

グリッドの問題を解決するための聖杯、必要性は余分あなたが左右三つの領域は、それらの外側の包装に余分なdiv要素を必要としないで弾性ボックス、取り除くことができ、問題の[コンテナ]を追加します。

body{
    display: grid;
}
#header{
    background: red;
    grid-row:1; grid-column:1/5; } #left{ grid-row:2; grid-column:1/2; background: orange; } #right{ grid-row:2; grid-column:4/5; background: cadetblue; } #middle{ grid-row:2; grid-column:2/4; background: rebeccapurple } #footer{ background: gold; grid-row:3; grid-column:1/5; }

上から下へ、その格子列、＃ヘッダが最初のセルを占有し、＃は、第二の格子を占有する＃権を＃の中央を左、＃フッター第3グリッドを占めます。

グリッド列は、横方向に左から右に、表し、5つのスペースに分割されています。これは＃ヘッダーと#footerすべての占めます。第1グリッド、＃の中央を占める#left、第4グリッドに5グリッドを占める＃権利を秒を占めます。