【初心者向け】heightに%が効かない時に確認するポイント

どうも7noteです。heightに%を使っても効かない理由

heightに%（相対値）を使用しても効かない原因、それは・・・

「基準となる要素の高さが絶対指定設定されていないから」

「%」は相対指定となります。そのため**基準となる高さがなければ指定しても効かないのです。

「height」に%を使う方法

index.html

<div class="oya">
   <p>高さに%を使うよ</p>
</div>

style.css

.oya {
  height: 100px;         /* 高さを指定 */
  border: solid 1px #000;/* 1pxの線を引く */
}

p {
  height: 50%;           /* 高さを指定 */
  background: #CCC;      /* 背景色を入れる */
}

親要素のdivが100px。
それに対しての50%なので、50px分がp要素の高さになります。

基準になる高ささえあれば親要素に高さが指定されてなくてもよい

index.html

<ul>
  <li>
    あああああああああああああああああああああああああああああああああああああああああああああ
  </li>
  <li>
    あああああああああああああああああああああああああああああああああああああああああ
  </li>
  <li>
    <p>高さに%を使うよ</p>
  </li>
</ul>

style.css

ul {
  display: flex;         /* フレックス要素にする */
  border: solid 1px #000;/* 1pxの線を引く */
}

ul li {
  width: 200px;          /* 横幅を指定 */
}

p {
  height: 50%;           /* 高さを指定 */
  background: #CCC;      /*  */
}

この例だと、pタグの親には何も高さを指定するものがないですが、flexboxは横並びにしたものの高さを揃える特徴があるので、他の要素で高さを指定していなくても、heightに%を指定することができます。

100vhで画面高さいっぱいを指定できる

もし画面全面に出したい時などは100vhを使えば%を使わなくても可能です。

style.css

/* 画面いっぱいのサイズにする */
div {
  width: 100vw; /* ウィンドウ幅いっぱい */
  height: 100vh /* ウィンドウ高さいっぱい */
}

まとめ

widthと同じ要領でheightを指定しがちなのですが、実際には効かない場合があります。
「おや？効いてるかな？」と思ったら、背景色を一時的に入れる等でチェックすることをおすすめします！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ