Div Höhe 100% und erweitert, um Inhalt zu passen

Ich habe ein div-Element auf meiner Seite, dessen Höhe auf 100% eingestellt ist. Die Körpergröße ist ebenfalls auf 100% eingestellt. Das innere Div hat einen Hintergrund und all das und unterscheidet sich vom Körperhintergrund. Dies funktioniert, um die Div-Höhe auf 100% der Browser-Bildschirmhöhe zu bringen, aber das Problem ist, dass ich Inhalte in diesem Div habe, die sich vertikal über die Browser-Bildschirmhöhe hinaus erstrecken. Wenn ich nach unten scrolle, endet das div an dem Punkt, an dem Sie mit dem Scrollen der Seite beginnen mussten, aber der Inhalt läuft darüber hinaus über. Wie kann ich dafür sorgen, dass der Div immer ganz nach unten geht, um dem inneren Inhalt zu entsprechen?

Hier ist eine Vereinfachung meines CSS:

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

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

Sobald ich die Seite scrolle, endet die Schwärze und der Inhalt fließt auf den roten Hintergrund. Es scheint keine Rolle zu spielen, ob ich die Position auf #some_div auf relativ oder absolut setze, das Problem tritt so oder so auf. Der Inhalt in #some_div ist größtenteils absolut positioniert und wird dynamisch aus einer Datenbank generiert, sodass seine Höhe nicht im Voraus bekannt ist.

Bearbeiten: Hier ist ein Screenshot des Problems:

Folgendes sollten Sie hauptsächlich im CSS-Stil tun div

display: block;
overflow: auto;

Und nicht anfassen height

Stellen Sie das heightauf autound min-heightauf ein 100%. Dies sollte es für die meisten Browser lösen.

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

Normalerweise tritt dieses Problem auf, wenn die untergeordneten Elemente eines übergeordneten Div schweben. Hier ist die neueste Lösung des Problems:

Schreiben Sie in Ihre CSS-Datei die folgende Klasse namens .clearfix zusammen mit dem Pseudo-Selektor : after

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

Fügen Sie dann in Ihrem HTML-Code die .clearfix-Klasse zu Ihrem übergeordneten Div hinzu. Beispielsweise:

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

Es sollte immer funktionieren. Sie können den Klassennamen als .group anstelle von .clearfix aufrufen , da dadurch der Code semantischer wird. Beachten Sie, dass es nicht erforderlich ist, den Punkt oder sogar ein Leerzeichen im Wert von Content zwischen dem doppelten Anführungszeichen "" einzufügen. Auch Überlauf: auto; Möglicherweise wird das Problem behoben, es verursacht jedoch andere Probleme wie das Anzeigen der Bildlaufleiste und wird nicht empfohlen.

Quelle: Blog von Lisa Catalano und Chris Coyier

Wenn Sie nur die verlassen height: 100%und verwenden display:block;das divwird innerhalb der so viel Platz wie der Inhalt übernehmen div. Auf diese Weise bleibt der gesamte Text im schwarzen Hintergrund.

Diese Frage mag alt sein, verdient aber ein Update. Hier ist eine andere Möglichkeit, dies zu tun:

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

Versuche dies:

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

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

IE6 und frühere Versionen unterstützen die Eigenschaft min-height nicht.

Ich denke, das Problem ist, dass wenn Sie dem Körper sagen, dass er eine Höhe von 100% haben soll, sein Hintergrund nur so hoch sein kann wie die Höhe eines Browser- "Ansichtsfensters" (der Anzeigebereich, der die Symbolleisten & Statusleisten & Menüleisten des Browsers und die ausschließt Fensterkanten). Wenn der Inhalt größer als ein Ansichtsfenster ist, wird die dem Hintergrund zugewiesene Höhe überlaufen.

Diese Eigenschaft für die minimale Höhe des Körpers sollte den Hintergrund so erzwingen, dass er mindestens so hoch wie ein Ansichtsfenster ist, wenn Ihr Inhalt nicht eine ganze Seite bis zum Ende ausfüllt, sondern ihn auch nach unten wachsen lässt, um mehr Inneninhalt zu erfassen.

Alte Frage, aber in meinem Fall fand position:fixedich es für mich gelöst. Meine Situation könnte jedoch etwas anders gewesen sein. Ich hatte ein überlagertes Halbtransparent divmit einer Ladeanimation, die ich beim Laden der Seite anzeigen musste. Mit height:auto / 100%oder min-height: 100%beides füllte also das Fenster, aber nicht den Off-Screen-Bereich. Wenn Sie position:fixeddiese Überlagerung mit dem Benutzer erstellen, wird der sichtbare Bereich immer abgedeckt und meine Animation zum Vorladen wird auf dem Bildschirm zentriert.

Fügen Sie diese beiden Zeilen einfach in Ihre CSS-ID #some_div ein

display: block;
overflow: auto;

Danach bekommen Sie, wonach Sie suchen!

Ich bin mir nicht ganz sicher, ob ich die Frage verstanden habe, da dies eine ziemlich einfache Antwort ist, aber hier geht es weiter ... :)

Haben Sie versucht, die Überlaufeigenschaft des Containers auf sichtbar oder automatisch zu setzen?

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

Wenn Sie dies hinzufügen, wird der schwarze Container auf die Größe gebracht, die Ihr dynamischer Container benötigt. Ich bevorzuge sichtbar gegenüber Auto, weil Auto mit Bildlaufleisten zu kommen scheint ...

Moderne Browser unterstützen die Einheit "Ansichtsfensterhöhe". Dadurch wird das div auf die verfügbare Ansichtsfensterhöhe erweitert. Ich finde es zuverlässiger als jeder andere Ansatz.

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

Auch Sie können so machen

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

Dies schließt jedes dynamische Div gemäß dem Inhalt ein. Angenommen, Sie haben ein gemeinsames Div mit Klasse, wodurch die Höhe jedes dynamischen Divs entsprechend dem Inhalt erhöht wird

Sie können auch verwenden

 display: inline-block;

meins hat damit gearbeitet

OVERLAY OHNE POSITION: FEST

Eine wirklich coole Art, wie ich dies für ein aktuelles Menü herausgefunden habe, war das Einstellen des Körpers auf:

position: relative

und setzen Sie Ihre Wrapper-Klasse wie folgt:

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

Dies bedeutet, dass Sie die Position nicht festlegen müssen und trotzdem scrollen können. Ich habe dies zum Überlagern von Menüs verwendet, die WIRKLICH groß sind.

benutze flex

.parent{
    display: flex
}

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

Ok, ich habe so etwas versucht:

Körper (normal)

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

Es ist nicht die genaue Art, es zu schreiben, aber wenn Sie das Haupt-Div als Tabelle anzeigen, wird es erweitert und dann habe ich Bildlaufleisten implementiert.