heightを%で指定したときに反映されない

Question

前提・実現したいこと

monacaでOnsenUIを使用し、スマホアプリを開発しています。
textareaのheightのみ%で指定することができず困っています。
pxで指定した場合は反映されます。widthはpx %ともに問題なく反映されます。

該当のソースコード

  <div class=taskinput>
   <textarea class="textarea" rows="3" placeholder="タスク名を入力"></textarea>
  </div>

.textarea{
  width: 75%;
  height: 25%;
  position: relative;
  top: 40px;
}
.taskinput{
  text-align:center;
}

ご回答のほどよろしくお願いします。

Comments

[m.ts10806]

.taskinputの指定もご提示ください。

[nyo80]

ただいま変更しました。

[azuapricot]

もう既に回答されてるので追記で

どこに対しての％かわからないのに％表示できるわけないよーってCSSが泣いてます。

10000pxに対しての25%なのか 100pxに対しての25%なのか。
実際表示するときには 354.8px とかいう具体的な数値に置き換わるので。

Answer 1

ちょうど少し前に回答したのですが、heightに対するパーセント指定は、親要素が「positon: absoluteやposition:fixedではない」かつ「height:auto」だと適用されません。

Answer 2

heightって曲者で、%で指定するときは「親要素に対する高さ」になるので、
直親である.taskinputに高さが何もないと「何を基準にするか」がなくなるので効きません。
なので.taskinputに適当なheightを指定してあげると、それに対しての割合で高さを調整してくれます。

※.taskinputも%指定にすると「その親の高さ」を求めに行くので注意です。

Comments

[nyo80]

よく理解できました。ありがとうございます。
皆様ご丁寧な回答ありがとうございました。

[m.ts10806]

ヒントになったようで何よりです