height プロパティが有効になる条件

基本的にheightプロパティが有効になるのは、親要素のスタイルにheightが指定されているときである。

<div class="parent">
  <div class="child">aaa</div>
  <div class="child">bbb</div>
  <div class="child">ccc</div>
</div>

.parent {
  height: 600px;
}
.child {
  height: 50%;
}

例外

要素が絶対位置指定されている場合（position: absolute;かposition: fixed;が指定されている場合）は親要素にheightが指定されていなくてもheightプロパティを指定することができる。

.parent {
  position: relative;
}
.child {
  position: absolute;
  height: 200px;
}