Q&A
>そんなバカな！
と書かれてますが、コードは書いた通りにしか動きません。
下手な煽りを書くより、淡々と事実だけ、起きてる現象だけ書かれたほうが良いかと思います。
親にmin-heightを適応させましたら、子要素のheightの指定が無視されます
なぜでしょうか？
fieldsetのheight:90%が無視されています
↑一見すると90%になってるように見えましたが、
実行結果画面（右下）のフレームを解除して表示（右クリックから）してみてください
fieldsetのheight:90%が無視されていることがわかります
<!DOCTYPE html> <style> body,html{ height:100%; } </style> <div style="width:100%;background:yellow;height:auto;min-height:10%;"> <fieldset style="width:90%;height:90%;background:red"></fieldset> </div>
これはどういう意図のコードなのですか？
height: auto は内容（子要素）の高さを参照し、
height: 90% は親要素の高さを参照するので、
親子間の循環参照なのですが、ここでいう90%とは何を基準にした90%なのでしょうか。
回答2件
0
ベストアンサー
親要素のheightが明示されていない（autoまたは無指定）の場合、子要素のheightをパーセントで指定してもautoとして解釈されるようです。
投稿2021/06/06 05:21
総合スコア8402
確かにそのようです
しかし親をautoにしないで指定すると高さが固定されてしまうと思うのですが、、、
min-height:をかけつつ、親は高さの変動ができる状態にはできないということですか？
.
親 height:auto;min-height:10%
子 height:90%
これだと子は90%にできないってことですよね？
親のheight:を固定値にしてしまうと大きさが変動しなくなるので、
親はmin-heightの指定をして、
子のheightを指定するにはどうしたらいいんでしょうか
> 親のheight:を固定値にしてしまうと大きさが変動しなくなるので、
状況によっては、vhのような単位を使う方法もあります。
0
以下のどちらかの問題だと思われます。
height90%とコロンが抜けています。heightにパーセンテージを指定した場合、包含ブロック（この場合は親要素）の高さを基準として計算します（MDN）。
投稿2021/06/06 04:01
総合スコア145208
＞height90%とコロンが抜けています。
コロンが抜けてました。修正しました。
しかし新たな問題が出ています
min-heightが聞かなくなりました
そしてそれに合わせて子要素のheightも変わっていません
> min-heightが聞かなくなりました
jsFiddleに投げてみましたが、再現しません（min-height分の高さは取られています）。
https://jsfiddle.net/a5ztw2b3/
ブラウザはFirefoxです
<style>
body,html{
height:100%;
}
</style>
<div style="width:100%;background:yellow;height:auto;min-height:10%;">
<fieldset style="width:90%;height:90%;background:red"></fieldset>
</div>
上記コードのみを実行すると再現されるのですが、、、
jsFiddleのほうは確かに正しい表示になっています
13:35現在まだ解決できていません
詳しい方お願いいたします
<!DOCTYPE html>
上記宣言を加えたところ、jsFiddleと同じ状態にできました
<!DOCTYPE html>
<style>
body,html{
height:100%;
}
</style>
<div style="width:100%;background:yellow;height:auto;min-height:10%;">
<fieldset style="width:90%;height:90%;background:red"></fieldset>
</div>
min-heightは適応できましたが、
fieldsetのheight:90%が無視されています
なぜかわかる方いらっしゃいませんでしょうか
https://fiddle.jshell.net/a5ztw2b3/show/?editor_console=
maisumakun氏が出された上記もfieldsetのheight:90%は無視されています
↑直リンクは禁止されてるんでしょうか
https://jsfiddle.net/a5ztw2b3/
↑実行結果画面（右下）のフレームを解除して表示（右クリックから）してみてください
あなたの回答
tips
プレビュー
