height

2016年11月03日 08:43

heightを100%にすれば、画面サイズにあわせて広がるとおもいきや、そうではなかった。

ある要素の height に相対値（%）が指定された場合、その高さは包含ブロックの高さに対して計算されます。
その要素が通常フローで配置されており、かつ包含ブロックの高さが明示されていない場合、要素の高さは auto として計算されます。 

https://qiita.com/shouchida/items/205fed63b886681661bd

通常フローで配置された height: 100%; の要素を「ブラウザ画面の高さ100%」で表示させたい場合、

ブロックボックスを形成する祖先要素それぞれに対しても height: 100%; を指定する必要があります。