こんにちは！
今回はCSSの包含ブロックとheight（height: 100%が効かない場合）についてまとめます。
包含ブロックとは
- 直近の親要素
heightに%を指定した場合の計算方法
- 包含ブロックの高さに対して%が計算される
- 包含ブロックの高さは明示的に指定していなければ、
autoとなっている autoは子要素の大きさに応じて変化する設定
孫要素でheight: 100%が効かない場合
例「孫も親と同じ高さにしたい」
- 親要素（height: 300px)
- 子要素（height: 指定なし = auto）
- 孫要素（height: 100%）
対処法
- 子要素にも
height: 100%を指定する
おわりに
Railsの勉強と共にCSSも改めて勉強しています。CSSはheightやwidthを思い通りに指定するのが思った以上に難しい気がします。こういった基本的な知識を一つ一つ覚えていく必要がありますね。
48/100
