質問

ある要素の高さを親要素の高さに対して100%にしたい場合、これまで私は親要素に対して高さを指定しないといけないと覚えておりました。

しかし、先日、親要素に高さを指定していないにも関わらず、その親要素の子要素の高さにheight: 100%を設定すると、その要素の高さが親要素の高さと一致するケースに遭遇致しました。

以下がその例になるのですが、以下の結果を見る限り、position: absoluteが設定されている場合にheight: 100%を設定すると、その親要素に高さが指定されていなくても親要素の高さと一致するようでした。

これは、親要素にposition: relativeが設定されている場合、その子要素にposition: absoluteとheight: 100%を設定すると、対象要素はその親要素に高さと一致すると理解すればよろしいでしょうか？

試しに親要素からposition: relativeを外して試してもみましたが、その場合やbodyの高さと一致するようでした。

結果

HTML

<div class="wrapper">
  <h1>Hello World!</h1>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <a>link</a>
  <div class="box">BOX</div>
</div>

CSS

.wrapper {
  position: relative;
  background-color: #cccccc;
}

/* 親の高さと一致する */
.wrapper::after {
  position: absolute;
  content: "";
  background: red;
  width: 100px;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.5
}

/* 親の高さと一致する */
a {
  display: block;
  position: absolute;
  background: yellow;
  width: 100px;
  height: 100%;
  top: 0;
  right: 0;
  opacity: 0.5
}

/* 親の高さと一致しない */
.box {
  width: 100px;
  height: 100%;
  background-color: green;
  margin: 0 auto;
}

行動規範の内容に同意します

回答2件

position: absolute要素は通常フローから外れるので、まずはないものとして考えて、通常フローの要素は下記の記述されている規定に従います。

height - CSS: カスケーディングスタイルシート | MDN

パーセント値は、生成ボックスの包含ブロックの高さを基準に計算されます。包含ブロックの高さが明示的に定義されず (すなわち、コンテンツの高さに依存します)、この要素が絶対位置指定されていない場合は、値は auto になります。

包含ブロック≒親要素に高さが設定されてなければ、auto ということになります。
これはある意味当然の仕様でしょう。
親要素(.wrapper)の高さは指定されてなければ、中身のフロー要素の高さの合計(h1 + ul + .box)になります。もし、.boxの高さが100%になったら、h1 + ul の高さはどうなりますか、矛盾しますよね。

position: absolute の場合は、通常フローから外れて、直近の祖先のposition: relative;要素を基準に相対配置されます。この場合は、.wrapperですが高さは中身の要素(h1 + ul + .box)によって決まっているので100%にすればその高さになります。

投稿2021/03/03 04:33