CSS 親のheight:100%とした場合に子はどこへいくのか

親のheight:100%とした場合に子はどこへいくんでしょうか
2つめ子は100%として存在してるけど表示されていないだけか、
height:0%として存在してしまっているのか、どちらなんでしょうか

<style>
body,html{
height:100%;
margin:0;
}
</style>

<div style="width:100%;height:100%">
<div style="width:100%;height:100%;float:left;background:red"></div>
<div style="width:100%;height:100%;float:left;background:blue"></div>
</div>

<style>
body,html{
height:100%;
margin:0;
}
</style>

<div style="width:100%;height:100%;float:left;background:red"></div>
<div style="width:100%;height:100%;float:left;background:blue"></div>

m.ts10806

2021/07/03 23:54

実際にやってみた結果どうだったのでしょうか。それが全てでは。

退会済みユーザー

2021/07/03 23:55

なぜいちいち水を差すような追記ばかりされてるのでしょうか

maisumakun

2021/07/04 00:02

> なぜいちいち水を差すような追記ばかりされてるのでしょうかなぜそれを「水を差す」と表現しているのでしょうか？「実際にやってみた結果」は重要な情報です。

Lhankor_Mhy

2021/07/04 00:33

『2つめ子は100%として存在してるけど表示されていないだけか、 height:0%として存在してしまっているのか、どちらなんでしょうか』とのことですが、当方の環境では普通に表示されています。表示されていないのは、おそらく、ご提示いただいていない部分に原因があると思われます。

miyabi_pudding

2021/07/04 00:44

表示されないとのことですが、スクロールはされましたでしょうか？ Lhankor_Mhyさんのおっしゃるとおり、スクロールすれば表示はされています。

BeatStar

2021/07/04 00:52

>> なぜいちいち水を差すよう… プログラミングは『こう書けば良い』ではないです。さらにプログラマやSE等は『考えること』、『調べること』、『試すこと』が仕事です。それなのに思考停止しているから言われているのでは？

Lhankor_Mhy

2021/07/04 01:42 編集

他の方も書かれていますが、よい質問の仕方がわからない場合は、一度ヘルプを読んでみると学びがあると思いますよ。結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 > 実際に起きた結果を示しましょう。例えば、「○○というエラーが表示された」、「レイアウトがこのように崩れてしまった」等です。あなたの想像ではなく、実際に起きたことを述べましょう。実際に起きたことと、あなたの予想をはっきり分けて書きましょう。

2ckD

2021/07/04 01:43

> なぜいちいち水を差すような追記ばかりされてるのでしょうかここは自分で調べてもわからなかったところを聞くところであって、クイズを出すところでもないし、雑談を楽しむところでもないんです。既に答えが出ているので、敢えて回答はしません。

Lhankor_Mhy

2021/07/04 01:46

その他、よい質問をするために参考になる記事を挙げておきますね。 https://www.hyuki.com/writing/techask.html https://qiita.com/seki_uk/items/4001423b3cd3db0dada7

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

回答1件

HTML
1<div style="width:100%;height:100%">
2<div style="width:100%;height:100%;float:left;background:red"></div>
3<div style="width:100%;height:100%;float:left;background:blue"></div>
4</div>

コードを実行してみました。
子要素の、背景色が赤のdivが表示されていて、
ブラウザをスクロールすると、
子要素の、背景色が青のdivが表示されていますね。