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
Antwort
dies geschieht, weil der Inhalt (untergeordnete Elemente) die Verwendung Höhe Element Eltern überfüllt ist overflow: scroll
Aber dann werde ich noch eine Scroll-Taste für meinen Container haben? – Darius92
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
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
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.
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
Ich war ein wenig aus, aber hier ist die Info. http://www.impressivewebs.com/vertical-percentages-css/ –
"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
- 1. 100% Div Höhe ohne Scrollbar
- 2. Element scrollbar halten, bis der letzte Inhalt erreicht ist
- 3. Wie mache ich jQuery Tabs() 100% hoch und Inhalt scrollbar
- 4. Halten Seitenmenü 100% Höhe
- 5. Sticky footer und Inhalt mit 100% Höhe
- 6. 100% Höhe div zwischen Kopfzeile und Fußzeile
- 7. CSS 100% Höhe Div
- 8. CSS 100 Prozent Höhe Körper und Element
- 9. Css Inhalt Höhe 100% ist scrollig Seite
- 10. CSS div 100% Höhe
- 11. Div 100% Höhe Scroll
- 12. Herstellung des div 100% Höhe
- 13. Firefox Scrollbar nicht angezeigt, wenn div Höhe klein ist
- 14. Bootstrap Kinder Element Höhe 100%
- 15. CSS div's Höhe beibehalten, wenn Inhalt dynamisch geändert wird
- 16. Div 100% von Ansichtsfenster und Inhalt
- 17. CSS Div Element Höhe Ausgabe
- 18. Warum ist die berechnete Höhe von DIV größer als ihr Inhalt (wie Svg), wenn ihre Höhe als "100%" angegeben ist?
- 19. Kind div Höhe 100% Innenposition: fixed div + Überlauf auto
- 20. Höhe 100%, wenn Mutterhöhe auto ist
- 21. JQuery Mobile Inhalt Höhe: 100%
- 22. CSS 100% Breite aber vermeiden Scrollbar
- 23. Erstellen scrollbaren Inhalt für eine feste 100% Höhe div
- 24. Kinderhöhe 100% der scrollbaren geordneten Inhalt Höhe
- 25. Scrollbar zu div Element in jquery
- 26. 100% Höhe und Überlauf mit Bootstrap
- 27. Make Div-Element 100% Höhe des Browser-Fensters mit CSS
- 28. Wie macht man einen Div-Vollbildmodus und scrollbar?
- 29. Margin Top 100% - Höhe der Mutter Div
- 30. Wie Panel-Höhe mit scroll zu halten, wenn der Inhalt für JQuery Mobile überläuft
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