Ich möchte body haben 100% der Browserhöhe. Kann ich das mit CSS erreichen?
Ich habe versucht, die height: 100% aber es funktioniert nicht.
Ich möchte eine Hintergrundfarbe für eine Seite festlegen, die das gesamte Browserfenster ausfüllt, aber wenn die Seite wenig Inhalt hat, erhalte ich einen hässlichen weißen Balken am unteren Rand.
Nach über 20 Antworten scheint keiner den Faktor erwähnt zu haben, der meiner Meinung nach am wichtigsten ist - der Aufschlag.
Nachdem ich praktisch jede Antwort in dieser Frage und einige andere ausprobiert habe, habe ich mein Markup wie folgt umstrukturiert:
<body>
<div class="section1">
<nav>
</nav>
...
</div>
<div class="section2">
</div>
</body>Im Wesentlichen werden zwei verschiedene Außenbehälter benötigt. Der erste Container ist für die Aufnahme der Navigationsleiste bestimmt et die die Hintergrundfarbe/das Hintergrundbild bis zur Höhe des Browsers ausdehnt, und die zweite, die alles "below the fold" enthält - einschließlich der zweiten Hintergrundfarbe/des zweiten Hintergrundbildes.
Bei dieser Lösung kann sich der Hintergrund des ersten Containers bis zum Boden ausdehnen, während der zweite Container so viel Platz hat, wie er braucht.
Von diesem Punkt an ist das einzige CSS, das benötigt wird, um das von mir und der ursprünglichen Frage gewünschte Ergebnis zu erzielen, das folgende:
body {
height: 100%;
}
.section1 {
height: 100%;
background: black; /* for demo purposes */
}
.section2 {
background: white; /* for demo purposes */
}
Zu dem zusätzlichen Platz am unteren Rand: Ist Ihre Seite eine ASP.NET-Anwendung? Wenn ja, ist wahrscheinlich fast alles in Ihrem Markup eingepackt. Vergessen Sie nicht, auch das Formular zu gestalten. Hinzufügen von overflow:hidden; in das Formular einfügen, kann der zusätzliche Platz am unteren Rand entfernt werden.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
4 Stimmen
CSS3 Viewport-Prozentsatz-Längen