フレックスボックスの脇の背景色をオーバーフローするコンテンツに動的に拡張するにはどうすればよいですか?

背景色をオーバーフロー領域まで拡張する

問題

フレックスボックス レイアウトでは、サイド要素の背景色が高さ全体に拡張されません。コンテンツの高さが表示領域より大幅に大きい場合でも、親コンテナーと同様です。背景色をコンテンツの下部まで動的に拡張するにはどうすればよいですか?

制限事項

• 追加の要素は追加できません。
• サイド要素はスクロールする必要があります
• 背景色は、親コンテンツの上から下まで拡張する必要があります。 container.
• side 要素は独自のオーバーフローを持つことはできません: auto.
• ソリューションは動的である必要があり、固定の高さに依存しません。

分析

パート I: 背景色

CSS の背景プロパティは、要素の境界線まで拡張されます。マージン領域。この場合、オーバーフロー領域は #body 要素の境界線の外側にあるため、背景色が切り詰められます。

パート II: オーバーフロー

オーバーフロー プロパティは、コンテンツの表示のみを制御し、背景は制御しません。 。背景ではなく、溢れ出るコンテンツが切り取られます。

解決策

この問題は、上記の制限により CSS だけで解決することはできません。 JavaScript ソリューションが必要です。

JavaScript は、コンテンツのサイズに合わせて #body 要素の高さを動的に調整できます。これにより、背景色がコンテナの底部まで広がるようになります。

コード スニペットの例を次に示します:

document.getElementById("body").style.height = document.documentElement.scrollHeight + "px";

以上がフレックスボックスの脇の背景色をオーバーフローするコンテンツに動的に拡張するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。