【CSS】縦幅を画面表示範囲外も含め100%に設定する方法。

モーダルウィンドウを出す際、バックグラウンドにwidth, height, 100%でシャドウマスクをかけたかった時のメモ。

普通に{height:100%}だけだと最初に表示(レンダリング)されている部分の高さに対して100%なので、下にスクロールするとマスクがかかっていない。

なので下記のようにしてやるとうまくいく模様(検証済み)。

html,body {
   margin:0px;
   height:100%;
}
body {
   min-height:100%;
   height:auto !important;
}

importantが肝らしい。まぁ単純に優先度を高めることで、ブラウザのエレメントスタイルなどに左右されないための施策かと思われる。

以外とやりたい場面多いので忘れないようにしよう。