it-swarm.com.de

Div Höhe 100% und erweitert, um den Inhalt anzupassen

Ich habe ein div-Element auf meiner Seite, dessen Höhe auf 100% gesetzt ist. Die Körpergröße ist ebenfalls auf 100% eingestellt. Das innere Div hat einen Hintergrund und das alles und unterscheidet sich vom Körperhintergrund. Dies funktioniert, um die div-Höhe auf 100% der Browser-Bildschirmhöhe zu bringen. Das Problem ist jedoch, dass sich innerhalb dieses div-Objekts Inhalte befinden, die sich vertikal über die Browser-Bildschirmhöhe hinaus erstrecken. Wenn ich nach unten scrolle, endet das div an der Stelle, an der Sie mit dem Scrollen der Seite beginnen mussten, der Inhalt läuft jedoch darüber hinaus. Wie kann ich das div immer ganz nach unten bringen, um den inneren Inhalt anzupassen?

Hier ist eine Vereinfachung meines CSS:

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

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

Sobald ich die Seite durchgeblättert habe, ist die Schwärze zu Ende und der Inhalt fließt auf den roten Hintergrund. Es scheint egal zu sein, ob ich die Position auf #some_div auf relativ oder absolut setze. Das Problem tritt so oder so auf. Der Inhalt von #some_div ist meistens absolut positioniert und wird dynamisch aus einer Datenbank generiert, so dass seine Höhe nicht im Voraus bekannt ist.

Bearbeiten: Hier ist ein Screenshot des Problems: div problem

130
Joey

Im CSS-Stil sollten Sie Folgendes tun: div

display: block;
overflow: auto;

Und berühren Sie nicht height

Setzen Sie height auf auto und min-height auf 100%. Dies sollte es für die meisten Browser lösen.

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

Normalerweise tritt dieses Problem auf, wenn die untergeordneten Elemente eines übergeordneten Divs verschoben werden. Hier ist das Latest Solution des Problems:

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

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

Fügen Sie dann in Ihrem HTML-Code die übergeordnete Div-Klasse .clearfix hinzu. Zum Beispiel:

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

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

Source: Blog von Lisa Catalano und Chris Coyier

12
Ifti Mahmud

Wenn Sie nur den height: 100% verlassen und display:block; verwenden, nimmt die div so viel Platz wie der Inhalt der div. Auf diese Weise bleibt der gesamte Text im schwarzen Hintergrund. 

6
RonnieVDPoel

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 groß sein kann wie die Höhe eines Browser-Viewports (der Anzeigebereich, der die Symbolleisten, die Statusleisten und Menüleisten des Browsers ausschließt) Fensterkanten). Wenn der Inhalt höher als ein Ansichtsfenster ist, wird die dem Hintergrund zugewiesene Höhe überlaufen.

Diese Eigenschaft für die Mindesthöhe am Körper sollte den Hintergrund FORCE mindestens mindestens so groß sein wie ein Ansichtsfenster, wenn Ihr Inhalt nicht eine ganze Seite bis zum Ende ausfüllt, Sie sollte jedoch auch zulassen, dass der Hintergrund nach unten wächst, um mehr Innenraum zu umfassen Inhalt.

4
Ace Frahm

Alte Frage, aber in meinem Fall habe ich festgestellt, dass position:fixed es für mich gelöst hat . Meine Situation könnte etwas anders gewesen sein. Ich hatte eine halbdurchsichtige div mit einer Lade-Animation, die ich während des Ladens der Seite anzeigen musste. Die Verwendung von height:auto / 100% oder min-height: 100% füllte das Fenster aus, nicht jedoch den Bereich außerhalb des Bildschirms. Durch Verwendung von position:fixed wurde dieses Overlay mit dem Benutzer durchgeblättert, sodass es immer den sichtbaren Bereich abdeckte und meine Vorlade-Animation auf dem Bildschirm zentriert blieb.

3
Thomas Smart

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

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

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

Haben Sie versucht, die overflow -Eigenschaft des Containers auf visible oder auto zu setzen? 

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

Wenn das hinzugefügt wird, sollten Sie den schwarzen Container auf die Größe setzen, die Ihr dynamischer Container benötigt .. Ich bevorzuge sichtbarer als auto, da auto scheinbar mit Bildlaufleisten zu kommen scheint.

0
jlisham

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

display: block;
overflow: auto;

Danach bekommen Sie, wonach Sie suchen!

0
singhviku

ok ich habe so etwas ausprobiert 

körper (normal)

MainDiv (wohin der gesamte Inhalt geht): Anzeige: Tabelle; Überlauf-y: Auto

es ist nicht die genaue Art, es zu schreiben, aber wenn man die Haupt-Div-Anzeige als Tabelle erstellt, wird sie erweitert und ich habe Bildlaufleisten.

0
alex

Auch das kannst du so machen

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

Dies schließt jedes dynamische Div entsprechend dem Inhalt ein. Wenn Sie ein gemeinsames Div mit der Klasse haben, wird die Höhe jedes dynamischen Div entsprechend dem Inhalt erhöht

0
ahmed sharief