CSS – 親要素の高さに子要素の高さを合わせる方法

親要素の高さに子要素を合わせたい場合下記のプロパティを使うと子要素にも親要素の高さが適用されるようになります。

• height: inherit;
• height: 100%;

また複数の親要素があるのであればvar()関数を使って変数として呼び出すといった方法もあります。

サンプルコード

inherit

<div class="parent">
	<div class="child">

	</div>
</div>

inheritの使い方としてはブロックレベルで親要素が存在していることで親要素のプロパティを継承してくれます。height以外にもカラーなども継承できるのでいろいろ使い道がありそうです。

.parent{
	width: 300px;
	height: 300px;
	background:#E8C48F;
}

.child{
	width: 100px;
	height: inherit;
	background: aqua;
}

100%

親要素の高さがpx % em rem vm vh vwであろうが自動的に親要素の高さに調整してくれます。

.parent{
	width: 300px;
	height: 300px;
	background:#E8C48F;
}

.child{
	width: 100px;
	height: 100%;
	background: aqua;
}

var()

var()関数の使い方はとても簡単でカスタムプロパティを登録するために疑似クラス:rootを作成しカスタムプロパティ名と値を登録するだけです。

:root{
	--parent: 100%; 
}

上記のカスタムプロパティは--parent変数に100%という値が格納されています。以上がカスタムプロパティ登録です。

次に、上記の変数を呼び出したい場合var()関数を使用します。()の中に変数名を入力することで呼び出しが可能です。

 height: var(--parent);