マジレス希望

なぜ height 100% がつくのかの疑問

解決済

質問者：東京ノミコト
質問日時：2019/10/23 20:18
回答数：2件

以下のコードで、height 100% になる理由がわかりません。

通常、親の高さの相対として高さは付けられると思っているのですが、
position absolute なら関係ないのでしょうか ?

<!DOCTYPE html>
<html lang="ja"><head>
<meta http-equiv="content-language" content="ja">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.alert {
position: absolute; top: 0%; left: 0%;
width: 100%;
height: 100%;

background-color: rgba( 0, 0, 0, 0.5 );
}
</style>
</head>

<body>
<div class="alert">
</div>
</body>
</html>

また、なぜ以下のコードが縦横 100% になるかもわかりませんでした。
position: absolute; top: 0; left: 0; bottom: 0; right: 0;

わかる方おりましたら、わかりやすい説明で頂けると助かります。

どうぞ、宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： debu120t
回答日時：2019/10/26 10:05

これはたしかに疑問ですね。

No.1さんが上げてくれている参考ページではpositionの基点がどこかっていう話が解説されているのですが、実はこの質問の回答としては的を射ない。

positionは親または先祖の要素を辿って行って、relativeを打っているところを基点としますよね。
質問者さんのあげているコードの場合はhtmlタグかbodyタグが基点になります。ここまではOKです。No.1さんがあげてくれた参考ページでもわかります。
しかし、bodyやhtmlは本来、高さが与えられていないときは、0%のはず。。。
よく画面いっぱいのデザインとかでbodyとhtmlにheight:100%;当ててなくてコケるでしょ。
https://qiita.com/shouchida/items/205fed63b88668 …

とすれば、その内側の要素（ここでは.alert）も高さが0になるはず。なのに.alertの要素は画面いっぱいになる！？、っていうのが疑問ってわけです。
たしかに疑問ですよねえ。

私見でしか話せないのですが、たぶんhtmlタグって特別なんだと思います。
html {
background;#ff0;
}
ってすると、高さ与えていないのに背景いっぱいに色がつくんですよねえ。
おそらく、ブロック的な高さはないけどページの基本となる特徴ももってるよ、という感じなんでしょうか。
まっさらなキャンバス、みたいな感じですかねえ。

というわけで、top: 0; left: 0; bottom: 0; right: 0;にしたとしても、
同じ理由で、htmlタグを基準にしているかぎりは画面いっぱいになるのではないでしょうかねえ。
不確かなので参考までです。