余談の背景色をオーバーフローする親を超えて拡張するにはどうすればよいですか?

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

問題:

Web レイアウトでは、 「overflow: auto」コンテナ内の「aside」要素の背景色は、表示される範囲を超えて拡張されません。

質問:

「aside」要素の背景色を強制的に高さとして動的にレンダリングするにはどうすればよいですか?オーバーフローコンテナーには制限がありますが、親コンテンツの高さ?

答え:

CSS の実装には制限があります

残念ながら、CSS だけでは背景を拡張することはできませんオーバーフロー領域に色を塗ります。これは次の理由によるものです。

• 背景色は要素の幅と高さのみをカバーし、マージンやオーバーフロー領域はカバーしません。
• 「オーバーフロー」プロパティは、コンテンツのみを制御し、要素は制御しません。背景。

JavaScript ソリューション

を実現するには望ましい効果を得るには、JavaScript を使用する必要があります。スニペットは次のとおりです:

const aside = document.querySelector("aside");
const parent = aside.parentElement;

parent.addEventListener("scroll", () => {
  aside.style.height = `${parent.scrollHeight}px`;
});

説明:

このスクリプトは、スクロールを監視する親要素にイベント リスナーを追加します。スクロールが発生すると、スクロール可能なコンテンツの高さに一致するように「aside」要素の高さが更新され、背景色が常にオーバーフロー領域全体を占めるようになります。

注:

• このスクリプトは、親要素に「overflow: auto」プロパティがあることを前提としています。
• 「aside」と "parent" は、それぞれ "aside" 要素とその親の CSS セレクターです。 HTML に合わせて調整してください。

以上が余談の背景色をオーバーフローする親を超えて拡張するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。