Divの高さは100％で、コンテンツに合わせて拡大します

ページに高さを100％に設定したdiv要素があります。身長も100％に設定されています。内部のdivには背景などがあり、本体の背景とは異なります。これはdivの高さをブラウザー画面の高さの100％にするために機能しますが、問題はそのdiv内にブラウザー画面の高さを超えて垂直に伸びるコンテンツがあることです。下にスクロールすると、divはページのスクロールを開始する必要があったポイントで終了しますが、コンテンツはそれを超えてオーバーフローします。内部コンテンツに合わせて、divを常に一番下まで移動させるにはどうすればよいですか？

ここに私のCSSの簡略化があります：

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

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

ページをスクロールすると、黒さが終了し、コンテンツが赤い背景に流れ込みます。#some_divで位置を相対に設定するか絶対に設定するかに関係なく、問題はどちらの方法でも発生します。#some_div内のコンテンツは主に絶対位置に配置され、データベースから動的に生成されるため、事前に高さを知ることはできません。

編集：これは問題のスクリーンショットです：

これは、メインで、CSSスタイルで何をすべきかです。 div

display: block;
overflow: auto;

そして触れないでください height

設定するheightにautoしてmin-heightまで100%。これでほとんどのブラウザで問題が解決します。

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}

通常、この問題は、親Divの子要素がフローティングしている場合に発生します。ここで最新のソリューション問題のは：

CSSファイルに、疑似セレクターとともに.clearfixという次のクラスを記述します。

.clearfix:after {
content: "";
display: table;
clear: both;
}

次に、HTMLで.clearfixクラスを親Divに追加します。例えば：

<div class="clearfix">
    <div></div>
    <div></div>
</div>

それは常に動作するはずです。コードをよりセマンティックにするため、クラス名を.clearfixではなく.groupとして呼び出すことができます。二重引用符 ""の間のContentの値にドットまたはスペースを追加する必要はないことに注意してください。また、overflow：auto; 問題を解決できる可能性がありますが、スクロールバーの表示などの他の問題が発生するため、お勧めできません。

出典：Lisa CatalanoとChris Coyierのブログ

をそのままにしheight: 100%て使用display:block;するdivと、内のコンテンツと同じスペースが使用されdivます。これにより、すべてのテキストが黒い背景にとどまります。

この質問は古いかもしれませんが、更新に値します。これを行う別の方法を次に示します。

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}

これを試して：

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

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

IE6以前のバージョンは、min-heightプロパティをサポートしていません。

ボディに高さを100％と指示すると、背景の高さは1つのブラウザの「ビューポート」（ブラウザのツールバーとステータスバーとメニューバーを除く表示領域、およびウィンドウの端）。コンテンツが1つのビューポートよりも高い場合、背景専用の高さからオーバーフローします。

ボディのこの最小高さプロパティは、コンテンツが1つのページ全体を下まで満たしていない場合、背景を少なくとも1つのビューポートと同じ高さにする必要があります。

古い質問ですが、私の場合、position:fixedそれを使用して解決しました。私の状況は少し違っていたかもしれません。divページの読み込み中に表示する必要のある読み込みアニメーションを含むオーバーレイ半透明がありました。つまり、ウィンドウを使用するheight:auto / 100%かmin-height: 100%、両方とも塗りつぶしますが、画面外の領域は塗りつぶしません。を使用するposition:fixedと、このオーバーレイがユーザーと一緒にスクロールし、常に表示領域を覆い、プリロードアニメーションが画面の中央に配置されたままになります。

これらの2行をCSS ID #some_divに追加するだけです

display: block;
overflow: auto;

その後、あなたはあなたが探しているものを手に入れます！

これはかなり簡単な答えなので、質問を理解したかどうかは完全にはわかりませんが、ここにいきます... :)

コンテナーのオーバーフロープロパティを可視または自動に設定してみましたか？

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

これを追加すると、動的コンテナーに必要なサイズに黒いコンテナーがプッシュされます。autoはスクロールバーが付いているように見えるので、私はautoよりも目に見えるほうを好みます...

最新のブラウザは「ビューポートの高さ」ユニットをサポートしています。これにより、divが使用可能なビューポートの高さに拡張されます。他のアプローチよりも信頼性が高いと思います。

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

こんなこともできる

display:block;
overflow:auto;
height: 100%;

これには、コンテンツごとの各動的divが含まれます。クラスに共通のdivがある場合、コンテンツに応じて各動的divの高さが増加するとします

あなたも使うことができます

 display: inline-block;

私はこれで働いた

位置なしのオーバーレイ：修正済み

最近のメニューでこれを理解した本当にクールな方法は、本文を次のように設定することでした。

position: relative

次のようにラッパークラスを設定します。

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

つまり、位置を固定する必要はなく、スクロールも可能です。私はこれを本当に大きいメニューのオーバーレイに使用しました。

フレックスを使用する

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}

わかりました、私はこのようなものを試しました：

ボディ（ノーマル）

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

正確な記述方法ではありませんが、メインのdivをテーブルとして表示すると、展開されてスクロールバーが実装されます。