Frage Wie kann ein HTML-Element 100% der verbleibenden Bildschirmhöhe ausfüllen, nur mit CSS?


Ich habe ein Header-Element und ein Inhaltselement:

#header
#content

Ich möchte, dass die Kopfzeile eine feste Höhe hat und der Inhalt die restliche verfügbare Höhe auf dem Bildschirm ausfüllt overflow-y: scroll;.

Ist dies ohne Javascript möglich? Vielen Dank.


75
2017-09-09 06:19


Ursprung


Antworten:


Der Trick dabei ist die Angabe height: 100%; auf der html und body Elemente. Einige Browser schauen auf die übergeordneten Elemente (html, body) um die Höhe zu berechnen.

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

64
2017-09-09 06:32



vergiss alle Antworten, diese CSS-Linie funktionierte für mich in 2 Sekunden:

height:100vh;

1vh = 1% der Browser-Bildschirmhöhe

Quelle

[aktualisiert April 2018] Wie in den Kommentaren erwähnt, unterstützten 2011, als die Frage gestellt wurde, nicht alle Browser die Viewport-Einheiten. Die anderen Antworten waren die Lösungen damals - vmax wird im IE immer noch nicht unterstützt, daher ist dies möglicherweise noch nicht die beste Lösung für alle.


189
2018-04-12 10:30



Eigentlich ist der beste Ansatz das:

html { 
    height:100%;
}
body { 
    min-height:100%;
}

Dies löst alles für mich und es hilft mir, meine Fußzeile zu steuern und es kann die feste Fußzeile haben, egal ob Seite nach unten gescrollt wird.

Technische Lösung - BEARBEITET

Historisch gesehen ist "Höhe" schwierig zu formen, verglichen mit "Breite", am einfachsten. Seit css konzentrieren sich auf <body> für das Styling zu arbeiten. Der Code oben - wir haben gegeben <html> und <body> eine Höhe. Hier kommt Magie ins Bild - da wir auf dem Spieltisch eine "Min-Höhe" haben, sagen wir dem Browser, dass <body> ist überlegen <html> weil <body> hält die Mindesthöhe. Dies wiederum ermöglicht <body> überschreiben <html> weil <html> hatte schon früher Höhe. Mit anderen Worten, wir tricksen Browser aus, um zu "stoßen" <html> vom Tisch, so dass wir unabhängig voneinander stylen können.


31
2018-01-19 01:32



Die akzeptierte Lösung wird nicht funktionieren. Sie werden feststellen, dass der Inhalt div wird gleich der Höhe seines Elternteils sein, body. Also setze die body Höhe bis 100% wird auf die Höhe des Browserfensters gesetzt. Nehmen wir an, das Browserfenster war 768px in der Höhe, indem Sie den Inhalt einstellen div Höhe bis 100%, das divDie Höhe wird wiederum sein 768px. Sie werden also mit dem Header div sein 150px und der Inhalt div sein 768px. Am Ende wirst du Inhalt haben 150px unter dem unteren Rand der Seite. Für eine andere Lösung, check out dieser Link.


7
2017-09-20 15:14



Mit HTML5 können Sie dies tun:

CSS:

body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}

HTML:

<header>blabablalba </header>
<section> Content </section>

4
2018-04-21 15:53



Für mich funktionierte das nächste gut:

Ich wickelte den Header und den Inhalt auf ein div

<div class="main-wrapper">
    <div class="header">

    </div>
    <div class="content">

    </div>
</div>

Ich habe das benutzt Referenz um die Höhe mit Flexbox zu füllen. Das CSS geht so:

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}

Weitere Informationen zur Flexbox-Technik finden Sie unter Referenz


2
2017-07-20 13:09



Sie können auch das übergeordnete Element festlegen display: inline. Sehen http://codepen.io/tommymarshall/pen/cECyH

Stellen Sie sicher, dass auch die Höhe von html und body auf 100% gesetzt ist.


1
2018-05-05 18:22