杯レイアウト（2）>>>>>

（2）弾性カセットレイアウト杯によって実装

HTML

1  <BODY>
 2      <DIV CLASS = "ボックス">
 3。         <ヘッダ>ヘッダ</ヘッダ>
 4。         <sectionTop>
 5。             <！ -差分杯及び実現、通常の配置順序の局在- >
 6              <脇> 1 </脇>
 7              <sectionTop> 2 </ sectionTop>
 8              <Articleこの記事は> 3 </ Articleこの記事は>あった
 。9          </ sectionTop>
 10          <フッタ>フッター</フッタ>
 11      </ div>
 12である </ BODY>

CSS

1  <スタイル>
 2          * {
 3              マージン：0。
4              パディング：0。
5              ボックスサイズ：ボーダーボックス ;
6          }
 7          HTML、
 8          体 {
 9              の高さ：100％ 。
10          }
 11          本体 {
 12              背景：#CCC。
13          }
 14         ■は {
 15              幅：100％ 。
16              高さ：100％ 。
17              ディスプレイ：フレックス。
18              フレックス方向：カラム。
19          }
 20          ■は>ヘッダ {
 21              高さ：100pxに。
22              幅：100％ 。
23              フォントサイズ：は50px ;
24              背景：トマト ;
25          }
 26          ■は>セクション {
 27              フレックス：1。
28              背景：黄色 ;
29              ディスプレイ：フレックス。
30          }
 31          ■は>脇部 {
 32              幅：200pxの。
33              背景：＃1 0FF。
34              フォントサイズ：150ピクセル。
35         }
 36          ■は>セクションのセクション {
 37              背景：＃1 0CC。
38              フレックス：1 ;
39              フォントサイズ：150ピクセル ;
40          }
 41          ■は>セクション物品 {
 42              幅：200pxの。
43              フォントサイズ：150ピクセル。
44              背景：＃1 0FF。
45          }
 46         ■は>フッタ {
 47              高さ：100pxに。
48              幅：100％ 。
49              フォントサイズ：は50px ;
50              背景：トマト。
51          }
 52      </スタイル>

効果：

おすすめ