David
Ich habe einen Farbverlauf auf den Hintergrund des body-Elements angewendet. Dann habe ich einen Container (direkt nach body), auf den ein PNG-Hintergrundbild angewendet wurde. Der Farbverlauf wird immer auf mindestens 100 % Fensterhöhe erweitert, der Container (#body2) jedoch nicht.
Irgendwelche Vorschläge, warum das nicht funktioniert? Sie können den HTML-Code auf meiner Webseite hier einsehen: http://www.savedeth.com/parlours/
Angeben height: 100% auf der html, body und #body2 Elemente (Zeile 1358).
html, body, #body2
{
height: 100%;
min-height: 100%;
}
Nicht in IE 6 getestet, funktioniert aber in 7.
Ja, funktioniert auf der Startseite, aber nicht auf der Seite „Medien“ oder jeder Seite, die über 100 % expandiert.
– David
11. März 2011 um 19:17 Uhr
Lebensretter, danke! Ich habe nicht einmal daran gedacht, 100% auf das HTML-Element zu setzen!?!
– jstafford
3. April 2012 um 5:06 Uhr
Hier ist eine weitere verrückte Tatsache für Sie, die gerade in einem Minimalfall auf Chrome 30.0 getestet wurde: Wenn Sie eine leere Seite nur mit den oben genannten erstellen, dann fügen Sie eine hinzu div mit nur min-height: 100%das div wird sich gut auf die Höhe dehnen body. Wenn Sie dann eine weitere hinzufügen div in diesem ersten, und versuchen Sie es min-height: 100%, es wird nicht funktionieren. Sie müssen sich fortpflanzen height:100% durch jede Ebene, die untergeordnete Elemente enthalten wird, von denen erwartet wird, dass sie sich auf 100 % Höhe ausdehnen (aus diesem Grund wird der CSS-Stil angewendet). beide html und body), in diesem Fall bedeutet die div direkt darunter body.
– Techniker
1. November 2013 um 2:42 Uhr
Die Verwendung von vh anstelle von % hat für mich funktioniert, ohne dass zusätzliche Tricks angewendet werden mussten.
Das habe ich:
html, body, .wrapper {
min-height: 100vh;
}
Wobei .wrapper die Klasse ist, die Sie auf Ihren Container/Wrapper oder den Hauptteil des Inhalts anwenden, den Sie über die volle Länge der Bildschirmhöhe ausdehnen möchten.
Dies funktioniert so, wie Sie es erwarten würden, wenn der Inhalt innerhalb des Wrappers kleiner oder größer ist, als die Bildschirmhöhe zulässt.
Das sollte funktionieren die meisten Browser.
auch für mich … In meinem Fall hatte das Eltern-Div auch eine Mindesthöhe festgelegt, sodass die Mindesthöhe für das untergeordnete Div nicht funktioniert, es sei denn, es wird ‘vh’ WEIRD verwendet.
– Bersan
2. August 2019 um 0:12 Uhr
Beachten Sie, dass 100vh die Höhe der Bildlaufleiste nicht berücksichtigt, falls vorhanden
– Emmanuel Meric de Bellefon
11. Januar 2020 um 17:26 Uhr
Sie haben Ihre Mindesthöhe auf 100 % eingestellt, was nur so hoch ist wie alle Elemente, die den Raum füllen. Drücken Sie Ihre Mindesthöhe in Pixeln aus. Beachten Sie auch, dass für IE6- eigene Regeln erforderlich sind. Sehen http://davidwalsh.name/cross-browser-css-min-height für mehr Details.
Aber ich setze das HTML- und BODY-Tag min-height auf 100 %, damit die Höhe des Fensters ausgefüllt wird (und es tut es, schaut auf den Farbverlauf).
– David
11. März 2011 um 19:32 Uhr
Ich denke, die Wirkung, die Sie erzielen möchten, wird viel einfacher sein, wenn Sie das Hintergrundbild auf dem HTML- und BODY-Tag platzieren. In diesem Fall müssen Sie keine Höhen angeben.
– Michael Copeland
11. März 2011 um 19:52 Uhr
Harris
position: absolute; funktioniert in den meisten Fällen
html, body {
min-height: 100vh;
}
.wrapper {
min-height: calc(100vh - <margin-top + margin-bottom>px);
}
Naftali
etwas setzt die Höhe Ihres Body-Elements auf 320 Pixel (wenn Sie in das Inspect-Element von Chrome schauen)
daher sind 100 % 320 Pixel groß. Deshalb wird es nur oben auf der Seite mit 100 % der Höhe von 320 Pixel angezeigt.
Sie müssen eine Höhe einstellen, damit die Mindesthöhe funktioniert.
Stellen Sie also die Höhe auf 100% ein, im Allgemeinen sollte dies funktionieren.
Sandro Munda
Scheiß drauf. Wer hat sowieso kein Javascript? Vor allem für diese Bevölkerungsgruppe.
<script type="text/javascript">
$(document).ready(function(){
if($("body").height() < $(window).height()){
$("body").height($(window).height());
}
});
</script>
Das beantwortet überhaupt nicht das “warum”
– Maël Nison
7. März 2014 um 15:18 Uhr
Es ist einfach nicht schön, JavaScript zu verwenden. Sie sagten, schrauben Sie es selbst, aber dies sollte nicht der defacto beste Weg sein, dies zu tun. Ich mag es nicht, dass es eine richtige Antwort gibt.
– Lodewijk
7. Juni 2014 um 1:05 Uhr
Jquery ist ziemlich übertrieben.
– Crupeng
30. Januar 2021 um 12:54 Uhr
Firefox, Safari, Chrome.
– David
11. März 2011 um 19:02 Uhr
Nicht wirklich sicher, aber Sie können finden Dies Frage sehr hilfreich.
– Dialler
11. März 2011 um 19:15 Uhr