IE11でmin-heightが正常に動作しない場合の解決法

IE11でmin-height:100%を設定しているのに正常に画面高に合わせてくれない場合の解決法です。

まず結論としては以下のような設定をすればmin-heightプロパティが正常化します。

#sample {
	min-height: 100vh;
	height: 100%;
}

親要素の高さもきちんと画面高の設定になっていて(height:100%;など)、上記コードを対象の要素に設定してあげればOKです。

ポイントとしてはmin-heightの「100vh」というところ。

この「vh」とは「viewport height」の略で、従来の％単位と似ているのですが、%と違い「デバイスの画面」を基準にしています。

これをmin-heightに設定した後にheight:100%;を設定することで、画面高に合わせたレイアウトを作成することができました。