CSS heightプロパティの%指定が上手くいかない理由 [ CSS ]

結論: いっそのこと使わないほうが楽なんじゃない？(これが結論？)

height: n%;の正しい仕様

CSSでは例えばheight: 100%;と書いた場合、実際にどういった高さとなるかご存じでしょうか? この算出値は親要素に左右されるのですが、 よく勘違いされている方がいるので…

ええ、勘違いしてました。

簡単に親ブロックに対する比率で設定できると思ったけど、親の設定が「auto」の場合はそういうわけにはいかなくて、厳密に親ブロックの高さが決まるようにレイアウトする必要があるみたい。

計算できるんだから計算結果に対する比率になるものだろうと思い込んでましたが、考えてみれば、親要素の高さは子要素の高さによって変化するものだから、循環していて計算で出るわけないですね。

一見うまく動いているように見える場合も、緩い規約の下でブラウザが拡大解釈してくれているから比較的それっぽく見えているだけ、ということだったらしい。