position:fixedを指定した要素にheight:100%を指定すると高さが100%になるのはなぜか

下記のソース、親要素にheight:100%を指定していないのに、.wrapの高さが100%になります。positionにfixedかabsoluteを指定すると高さが100%になる様ですが、なぜでしょうか？

<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<style type="text/css">

.wrap {
	position: absolute;
	top:0;
	left:0;
	width: 100px;
	height: 100%;
	background: #fff000;
}
</style>
</head> 
<body>
<div class="wrap">
	
</div>
<script>

</script>
</body>
</html>

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

回答3件

ベストアンサー

heightにパーセントで値を指定した場合、基準は包含ブロックによります（MDN）。

この包含ブロックは、通常のposition:staticであれば「display:inlineでない、いちばん近い祖先要素」に決まりますが、position:absoluteやposition:fixedでは（祖先にposition:absoluteやposition:fixed、position:relativeの要素がない限り）初期包含ブロック、すなわち通常はブラウザの表示枠となります（参考）。

投稿2018/08/07 11:59

編集2018/08/07 12:48

maisumakun

総合スコア146544

msiqb

2018/08/07 12:20

その、ページ全体にheight:100%が指定されていないのに、なぜ、子要素が100%になるのでしょうか？

maisumakun

2018/08/07 12:29

すみません、修正しました。

msiqb

2018/08/07 12:42

では、下記サンプルの、.img-container:before は、なぜ祖先要素にも高さが指定されていないのに、親要素に高さがFIXするのでしょうか？ https://webdesignday.jp/samples/p3636/chapter02.html .img-container:before { background: #333; content: ''; display: block; height: 100%; position: absolute; transform: translateX(-100%); transition: all .8s 0s ease; width: 100%; z-index: 1; }

maisumakun

2018/08/07 12:49

::beforeは、（Inspectorを見てみればわかりやすいですが）指定した要素の子要素扱いとなります。「親要素」である.img-container自身がposition:relativeなので、ここが基準となります（relativeが抜けていたのは失礼しました）。

msiqb

2018/08/07 13:03

すいません、話の論点がずれているかもしれません。下記のサイトにある様に、height:100%は、親要素に高さが明示されていなければ機能しないはずです。 position:fixedを指定すると、親要素にheightがなくてもFIXするのがなぜか、という質問です。 https://ginpen.com/2011/07/01/height-100-parcent/

maisumakun

2018/08/07 13:10

MDNのほうに、「包含ブロックの高さが明示されず（＝コンテンツの高さ依存の場合）、この要素が絶対位置指定されていないなら、値は auto になります。」とあります。逆を返せば、position:absoluteの場合は包含ブロックの高さを適用する、ということになります。

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

position: fixed;はwindow全体を基準とします。
htmlやbodyが親要素となるわけではありません。
htmlとbodyにheight: 100%;を指定していなくても、fixedの要素がheight: 100%;に出来るのはwindow全体が基準となっているからです。

ですので、top: 0;はwindowの上を基準とし、left: 0;はwindowの左を基準とします。

投稿2018/08/07 12:48

編集2018/08/07 12:49

退会済みユーザー

総合スコア0

CSSの仕様です。
ボックスモデルの位置基準をどこに取るかで決まります。

「position:absolute;」または「position:fixed;」が無ければposition:static;と見なされて、親の高さが「0」の場合は、いくら％比率を設定しても「0×○○%=0」なので表示されません。
※position:relative;もposition:static;と同様です。

投稿2018/08/09 22:40

yoshinavi

総合スコア3525

msiqb

2018/08/10 00:51

position:absolute; の場合、高さは　position:relative;が指定されている親要素になると思います。でも、下記のdemo様に、position:relative;が指定されている親要素に高さの指定がなくても、position:absolute; が指定さている子要素のheight:100%;が有効になる場合があります。 https://webdesignday.jp/samples/p3636/chapter02.html .img-container:beforeの部分です。他の方にご回答いただいていますが、まだしっくりこず、納得のゆくリソースがあればと思っています。

yoshinavi

2018/08/10 02:11 編集

「position:absolute;」の場合の「height:100%;」は「position:relative;が指定されている親要素の高さの範囲」であり、参考先も同様です。しかし、参考先の親は「height設定なし」。これは「height:auto;」となり、逆に子要素の高さに依存します。子要素のimgがH533pxなので、これが基準の高さになります。提示のコードは親がbodyになり、画面が高さになるので、画面の高さ一杯に表示されます。

yoshinavi

2018/08/10 02:12

文章の一部を編集しました。

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

あなたの回答