1. ホーム
  2. css

[解決済み】Divの高さが100%で、コンテンツに合わせて拡大される。

2022-04-09 03:56:22

質問

私のページには、高さが100%に設定されたdiv要素があります。 bodyの高さも100%に設定されています。内側のdivは背景などを持っていて、bodyの背景とは異なっています。これは、divの高さをブラウザ画面の高さの100%にするためには有効ですが、問題は、そのdivの中に、ブラウザ画面の高さを超えて垂直に伸びるコンテンツがあることです。下にスクロールすると、divはページをスクロールし始めなければならなかった地点で終わりますが、コンテンツはそれ以上にはみ出てしまいます。どうすれば、内側のコンテンツに合わせて div を常に一番下まで移動させることができるでしょうか?

以下は、私のCSSを簡略化したものです。

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

ページをスクロールすると、黒が終わり、コンテンツが赤い背景に流れます。 この問題は、#some_divのpositionをrelativeにするかabsoluteにするかには関係ないようで、どちらでも発生します。some_div内のコンテンツはほとんど絶対位置で、データベースから動的に生成されるため、高さを事前に知ることはできません。

編集:以下は問題のスクリーンショットです。

解決方法は?

以下は、CSSスタイルで、メインの div

display: block;
overflow: auto;

には触れないでください。 height