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

172

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: div Problem

Joey
quelle
Dies wurde vor einigen Wochen gefragt. Ich werde sehen, ob ich diese Frage finden kann. Ich glaube, ich habe es kommentiert. bearbeiten Ich glaube, Ihre Frage ist ähnlich wie diese: stackoverflow.com/questions/9398313/…
jmbertucci
Bitte Ihren Code zum besseren Verständnis
Sandeep
können Sie Ihren vollständigen Code pls
Sven Bieder
23
Sie wollen alle meine Tausenden von Zeilen von PHP-Code, CSS und Javascript? Ich habe den Teil von CSS gepostet, der für die Frage relevant war ...
Joey
2
NECROPOST IS A GO: Einstellen der Überlauf Eigenschaft behebt allgemein Fragen wie diese , wo Inhalte innerhalb eines div vorbei ist Stretching ( overflow: hidden;, overflow: scroll;usw.).
AlbertEngelB

Antworten:

308

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

display: block;
overflow: auto;

Und nicht anfassen height

João Pimentel Ferreira
quelle
4
Hat super funktioniert. Ich musste das Container-Div hinzufügen height: 100%, html, bodydamit es die Höhe ausfüllt, wenn nicht genügend Inhalt vorhanden ist.
Nico Huysamen
erstaunliche Lösung, aber Sie können tatsächlich die Höhe berühren, wenn das Ziel so etwas wie eine
reaktionsschnelle
Wird das display: block;benötigt? Divs sind bereits Elemente auf Blockebene.
Max Heiber
es fügt eine innere Bildlaufleiste für mich hinzu (sowohl horizontal als auch vertikal)
Nathan H
Wenn das übergeordnete Element immer noch etwas größer als die untergeordneten Elemente ist, suchen Sie nach zusätzlichen Leerzeichen und / oder  entfernen Sie diese. Versuchen Sie auch, die Zeilenhöhe anzupassen. Zum Beispiel habe ich gesagt line-height: 0, weil ich keinen Text brauchte, nur um ein Bild zu zeigen.
Zorgatone
57

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;
}
Matthew Sprankle
quelle
3
IMO, dies beantwortet die Frage "Wie kann ich das Div immer ganz nach unten bringen, um es an den inneren Inhalt anzupassen?" Besser als die aktuell markierte Antwort, bei der das Überlauf-Scrollen einfach aktiviert wird, anstatt sicherzustellen, dass sich div / body entsprechend seinem Inhalt erweitert. +1
Jammerz858
Arbeitete für meinen Fall. Vielen Dank!
Tyson Nero
Es kann erwähnenswert sein, dass es aus irgendeinem Grund nicht funktioniert, wenn es heightist 100%und min-heightist auto- ich würde erwarten, dass diese in diesem Fall austauschbar sind, aber es sieht so aus, als ob sie es nicht sind.
PeaBrain
13

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

Ifti Mahmud
quelle
8

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.

RonnieVDPoel
quelle
Wo hast du benutzt display: block? Ich sehe das nicht in deiner Frage.
Leichtigkeitsrennen im Orbit
Ich habe es zu #some_div hinzugefügt, nachdem Ronnie es vorgeschlagen hatte, aber es hat das Problem nicht behoben.
Joey
1
Könnten Sie versuchen, float hinzuzufügen: none; zum gleichen #some_div css
RonnieVDPoel
float: none;Verwenden Sie stattdessen clear:both;. Es macht das gleiche, ist aber eher browserübergreifend, @RonnieVDPoel
Cannicide
6

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%;
}
user9459537
quelle
1
Wenn Sie eine alte Frage stellen möchten, wird die Verwendung aktueller Werte (AKA keine Präfixe für Flex) empfohlen.
Jhpratt
Entschuldigung, ich weiß nicht, wovon du sprichst.
user9459537
1
Flex-Präfixe sind seit einiger Zeit nicht mehr erforderlich.
Jhpratt
Und welche sind?
user9459537
5

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.

Ace Frahm
quelle
3

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.

Thomas Smart
quelle
1

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

display: block;
overflow: auto;

Danach bekommen Sie, wonach Sie suchen!

singhviku
quelle
0

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 ...

jlisham
quelle
0

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;
}
devdrc
quelle
0

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

Ahmed Sharief
quelle
0

Sie können auch verwenden

 display: inline-block;

meins hat damit gearbeitet

Parthan_akon
quelle
0

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.

Benjamin Vaughan
quelle
0

benutze flex

.parent{
    display: flex
}

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

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.

Alex
quelle