2016-05-27 10 views
-1

Die Fragen sieht einfach aus, aber bin damit fest.Ich habe Haupt. container with width: 90%; height: 100%; background-color: white .Es muss immer 100% Höhe der Seitenhöhe sein.Mein Problem, wenn ich mehr Inhalt bekomme und ich die Seite nach unten scrollen muss, ist .container beendet.Wie div Element Höhe 100% zu halten, wenn Inhalt geändert und scrollbar ist

enter image description here

+0

Sie wollen natürlich keine Höhe, sondern eine 'min-height'. Prozentsätze dafür zu verwenden, ist schwierig, um richtig zu funktionieren, besonders wenn der Rest der Seite in der Lage sein muss, normal zu blättern - also empfehle ich stattdessen die "vh" -Einheit "min-height: 100vh" zu verwenden. Überprüfen Sie caniuse.com auf Browser-Unterstützung und sehen Sie, ob dies für Sie ausreicht oder ob Sie eine Ausweichlösung/Abhilfe benötigen. – CBroe

Antwort

0

dies geschieht, weil der Inhalt (untergeordnete Elemente) die Verwendung Höhe Element Eltern überfüllt ist overflow: scroll

+0

Aber dann werde ich noch eine Scroll-Taste für meinen Container haben? – Darius92

+0

Wenn Sie möchten, dass der Inhalt den Eltern nicht überläuft, dann sollten Sie die Höhe der Kinder innerhalb des Containers mit Pixeln und verwenden Höhe: 100% auf Kind Elemente sowie – oneLeggedChicken

+0

Hier ist meine Einstellungen html, 'Körper { Höhe: 100 %; maximale Höhe: 100%; Hintergrundfarbe: # FAF8F1; } . Behälter { Breite: 90%; Höhe: 100%; maximale Höhe: 100%; Anzeige: Block; Rand links: Auto; Rand rechts: Auto; \t Hintergrundfarbe: weiß; \t Padding-links: 10px; padding-rechts: 10px; \t Randradius: 5px; \t border-style: Grat; Rahmenbreite: 2px; } ' – Darius92

0

Es ist etwas über Höhe: dass man super ärgerlich finden könnte, und das ist es ist basierend auf dem% der Breite. wenn du also Höhe schreibst: 100%; Es nutzt tatsächlich die Breite des Bildschirms nicht die Höhe. Wenn Sie also die Höhe skalieren möchten, können Sie em-Einheiten verwenden.

+1

Quelle? Soweit ich weiß, bezieht sich die Höhe in Prozent auf die Höhe des Elternteils, und standardmäßig auf "auto", wenn es nicht definiert ist: http: //stackoverflow.com/questions/31728022/why-is-percentage-height-not -working-on-my-div/31728799 # 31728799 – Sebastianb

+0

Ich war ein wenig aus, aber hier ist die Info. http://www.impressivewebs.com/vertical-percentages-css/ –

+0

"Ein Prozentwert auf Höhe ist relativ zur Höhe des umschließenden Blocks", ich denke, Sie wurden auf Prozentsatz in Polsterung/Marge verwiesen – Sebastianb

Verwandte Themen