背景色を動的に拡張してコンテンツ領域を埋めるにはどうすればよいですか?

コンテンツ領域を背景色で動的に塗りつぶすように脇要素を強制する

HTML では、一般的なレイアウトにはメイン コンテンツ領域の横に脇要素が含まれますスクロールオーバーフロー内。ただし、サイド要素の背景色は通常、表示領域で切り詰められ、折り目の下に空白のスペースが残ります。この記事では、コンテンツの高さに合わせて脇の背景色を動的に拡張するという課題について説明します。

問題の説明

次の HTML 構造を考えてみましょう:

<div id="body">
  <main>...</main>
  <aside>...</aside>
</div>

#body 要素にはオーバーフローが auto に設定されており、メイン コンテンツのスクロールが可能になります。サイド要素の背景色は、表示される領域に制限されていても、コンテンツ全体の上から下まで垂直に伸びる必要があります。

制限事項

• 追加の要素は追加できません。
• サイド要素は、メイン コンテンツと一緒にスクロールする必要があります。
• 背景色は、折り目の下のコンテンツの高さ全体まで拡張する必要があります。
• side 要素のオーバーフローを auto に設定することはできません。

JavaScript ソリューション

残念ながら、これは CSS だけで実現することはできません。オーバーフロー プロパティは、背景ではなくコンテンツに影響します。したがって、JavaScript ソリューションが必要です。 1 つのアプローチには以下が含まれます:

1. 脇の高さを設定する関数を作成します:

function setAsideHeight() {
  const bodyHeight = document.getElementById("body").offsetHeight;
  const aside = document.querySelector("aside");
  aside.style.height = bodyHeight + "px";
}

2. ウィンドウが読み込まれてサイズ変更されるときに関数を呼び出します:

window.addEventListener("load", setAsideHeight);
window.addEventListener("resize", setAsideHeight);

このスクリプトは、コンテンツの全体の高さに合わせて側面の高さを動的に調整し、背景色がスクロール領域の下部まで広がるようにします。

以上が背景色を動的に拡張してコンテンツ領域を埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。