htmlとbodyのheightを自動で画面いっぱいに合わせたい

Reactで、動的に要素が追加される(=途中でコンテンツ全体の高さが変わる)ページを作っていて、そのページにCSSで背景画像を設定し、CSSのbackdrop-filterを使って背景画像をぼかすということをやっています。

CSS
1html{
2  height: 100%;
3}
4
5body{
6    margin: 0;
7    height: 100%;
8    background-image:url("./directory/file.jpg");
9    background-size:cover;
10    backdrop-filter: blur(17px) saturate(140%);
11}

今現在、CSSの記述はこのようになっていますが、htmlとbodyにheight: 100%を指定すると、要素が追加されてオーバーフローした時(スクロールバーが出現した時)、追加された要素の高さ分のbackdrop-filterが反映されません。

逆に、height: autoを指定すると、オーバーフローしていない時に、要素がある場所の高さまでしかbackdrop-filterが反映されません。background-imageは意図したとおりに動きます。

backdrop-filterがいけないのかと思い、別の方法でもやってみましたが、同じ挙動でした。

オーバーフローしていない時は、height: 100%、した時はheight: autoにするような良い方法はありませんでしょうか？

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

回答1件

ベストアンサー

height でなく min-height ではどうでしょう。

CSS
1html{
2    /* height: 100%; */
3}
4
5body{
6    margin: 0;
7    /* height: 100%; */
8    min-height: 100vh; /* ← ← ← */
9    background-image:url("./directory/file.jpg");
10    background-size:cover;
11    backdrop-filter: blur(17px) saturate(140%);
12}