heightの%が効かない

Question

heightがpxだと指定できるのですが、%だと効かないです。
親要素のheightをうまく設定できてないからだと思うのですが、解決法が思いつきません。
ご教授くださるとありがたいです。

  <main>
    <div id = motto>
      <h3>[モットー]</h3>
    </div>
    <div id = service>
      <h3>[サービス]</h3>
    </div>
  </main>

main{
  height:auto;
}
#motto h3{
  margin:0;
  height:50%;
  background-color:rgba(128,0,128,1);
}
#service h3{
  margin:0;
  height:500px;
  background-color:rgba(128,128,128,1);
}

Comments

[sousuke]

50%の意味が分かりません。何に対しての50%？

[yshk0402]

mainに対してです

[sousuke]

#mottoのheightが0ならmainのheightは500pxですし、
#mottoのheightが300pxならmainのheightは800pxです。mainのheightは子要素の高さに依存しているのでmainの50％というものはありません。

Answer 1

mottoの高さを決めるにはmainの高さを決める必要があって、mainの高さを決めるにはmottoの高さを決める必要があります。
CSSではこのような時には、autoであるとみなします。

---

ところで、

【main】=【motto】+【service】, 【main】* 0.5 =【motto】, 【service】= 500
↓
【main】 =【main】* 0.5 +500
↓
【main】 = 1000

となるので、実際には値が一意に決まります。
ですから、以下のようにすればいいのでは？

.main{
  height: 1000px;
}

Comments

[yshk0402]

解決しました！

Answer 2

main{
height:100%;
}
や
main{
height:100vh;
}
などはどうですか

Comments

[yshk0402]

ご回答ありがとうございます。

[退会済みユーザー]

解決したようでよかったです