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

118

Ich habe ein Header-Element und ein Content-Element:

#header
#content

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

Ist das ohne Javascript möglich?

html css Harry
quelle

83

Der Trick dabei ist die Angabe von 100% Höhe für die HTML- und Body-Elemente. Einige Browser suchen nach den übergeordneten Elementen (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;
}

BentOnCoding
quelle

1

Ich habe alle Lösungen ausprobiert, aber nur dies hat mein Problem gelöst.

Alex

1

@Alex Wenn dies für alle Browser funktioniert, auf die Sie abzielen, können Sie es auf jeden Fall implementieren. Jeder hat unterschiedliche Anforderungen.

BentOnCoding

319

Vergiss alle Antworten, diese CSS-Zeile hat in 2 Sekunden für mich funktioniert:

height:100vh;

1vh = 1% der Bildschirmhöhe des Browsers

Quelle

Für eine reaktionsschnelle Layoutskalierung möchten Sie möglicherweise Folgendes verwenden:

min-height: 100vh

[Update November 2018] Wie in den Kommentaren erwähnt, können durch die Verwendung der Mindesthöhe Probleme mit reaktionsschnellen Designs vermieden werden

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

Sebastien H.
quelle

9

Dies ist die einfachste Antwort, da Sie nicht die Höhe aller übergeordneten Elemente auf 100% einstellen müssen. Hier ist die aktuelle Unterstützung für vh - caniuse.com/#feat=viewport-units - iOS benötigt möglicherweise eine Problemumgehung, da "vh unter iOS die Höhe der unteren Symbolleiste in die Höhenberechnung einbezieht".

Brian Burns

2

WOW, schöner Fund! Schauen Sie sich all diese Leute mit überkomplizierten Antworten an.

NoName

8

Als die Frage 2011 gestellt wurde, unterstützte keiner der großen Browser Ansichtsfenstereinheiten. Diese "überkomplizierten Antworten" waren damals die einzigen Optionen.

JJJ

6

Kleiner Vorschlag, dass min-height: 100vha viel besser wäre. Es würde sich auch für reaktionsschnelle Designs skalieren lassen.

Wiggy A.

3

Dies beantwortet die gestellte Frage nicht, dies würde 100% des Ansichtsfensters einnehmen. Er möchte dies nicht, da sein Header x% des Ansichtsfensters einnimmt, da die anderen Antworten korrekt sind.

4cody

35

Eigentlich ist der beste Ansatz folgender:

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

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

Technische Lösung - BEARBEITET

Historisch gesehen ist es schwierig, mit "Höhe" zu formen, verglichen mit "Breite" am einfachsten. Da konzentriert sich CSS darauf, <body>dass das Styling funktioniert. Den Code oben - wir gaben <html>und <body>eine Höhe. Hier kommt Magie ins Spiel - da wir auf dem Spieltisch eine Mindesthöhe haben, sagen wir dem Browser, dass er <body>überlegen ist, <html>weil er <body>die Mindesthöhe hält. Dies ermöglicht wiederum <body>das Überschreiben, <html>da <html>die Höhe bereits früher war. Mit anderen Worten, wir betrügen den Browser, <html>um vom Tisch zu "stoßen" , damit wir unabhängig stylen können.

Faron
quelle

1

Oh mein Gott, es ist ein Wunder!

Geoff

Wie ein Wunder funktioniert es! Aber bitte: warum min-heightund height?

Joy

1

@ShaojiangCai - Historisch gesehen ist es schwierig, mit "Höhe" zu formen, verglichen mit "Breite" am einfachsten. Da konzentriert sich CSS darauf, <body>dass das Styling funktioniert. Dieser Code: Wir gaben <html>und <body>eine Höhe. Hier kommt Magie ins Spiel - da wir auf dem Spieltisch eine Mindesthöhe haben, sagen wir dem Server, dass er <body>überlegen ist, <html>weil er <body>die Mindesthöhe hält. Dies ermöglicht wiederum <body>das Überschreiben, <html>da <html>die Höhe bereits früher war. Mit anderen Worten, wir betrügen den Server, <html>um vom Tisch zu "stoßen" , damit wir unabhängig stylen können.

Faron

2

@Faron Es scheint, als wäre "Browser" hier eine bessere Wortwahl als "Server". ;)

LETs

@EunLeem ... Ich stimme Ihnen zu, wie ich den richtigen Wortlaut hätte wählen können, um dies zu beheben. Danke für den "Elbow-Bump" Tipp. Meine Antwort wurde entsprechend aktualisiert.

Faron

14

Sie können vh für die Eigenschaft min-height verwenden.

min-height: 100vh;

Sie können wie folgt vorgehen, je nachdem, wie Sie die Ränder verwenden ...

min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element

Almeida Cavalcante
quelle

10

Die akzeptierte Lösung funktioniert tatsächlich nicht. Sie werden feststellen, dass der Inhalt divder Höhe des übergeordneten Inhalts entspricht body. Wenn Sie also die bodyHöhe auf 100%einstellen, wird sie gleich der Höhe des Browserfensters eingestellt. Lassen Sie uns sagen , dass das Browser - Fenster war 768pxin der Höhe, durch den Inhalt Einstellung divder Höhe 100%, die divin ‚s Höhe ausfallen wird 768px. Auf diese Weise erhalten Sie das Header-Div-Wesen 150pxund das Content-Div-Wesen 768px. Am Ende haben Sie Inhalte 150pxunter dem Ende der Seite. Eine andere Lösung finden Sie unter diesem Link.

dykstrad
quelle

8

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>

Miguel
quelle

Achten Sie darauf, dass Sie die prozentuale Höhe nicht berechnen. Firefox funktioniert damit nur dann richtig, wenn alle Eltern eine festgelegte Größe haben.

TomDK

4

Für mich hat der nächste gut funktioniert:

Ich habe den Header und den Inhalt in ein Div eingewickelt

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

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

    </div>
</div>

Ich habe diese Referenz verwendet , um die Höhe mit Flexbox zu füllen. Das CSS sieht folgendermaßen aus:

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

Weitere Informationen zur Flexbox-Technik finden Sie in der Referenz

hasher
quelle

1

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

Stellen Sie sicher, dass auch die Höhe von HTML und Body auf 100% eingestellt ist.

tommymarshall
quelle

Von Nur-Link-Antworten wird abgeraten. Bitte versuchen Sie, den Linkinhalt in Ihrer Antwort zusammenzufassen

Benutzer, der kein Benutzer ist

1

Die akzeptierte Antwort funktioniert nicht. Und die Antwort mit der höchsten Stimme beantwortet nicht die eigentliche Frage. Mit einem Header mit fester Pixelhöhe und einem Füllelement in der verbleibenden Anzeige des Browsers und scrollen Sie für oowerflow. Hier ist eine Lösung, die tatsächlich funktioniert und die absolute Positionierung verwendet. Ich gehe auch davon aus, dass die Höhe des Headers durch den Klang des "festen Headers" in der Frage bekannt ist. Ich verwende hier 150px als Beispiel:

HTML:

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

CSS: (Hinzufügen der Hintergrundfarbe nur für visuelle Effekte)

#Header
{
    height: 150px;
    width: 100%;
    background-color: #ddd;
}
#Content
{
   position: absolute;
   width: 100%;
   top: 150px;
   bottom: 0;
   background-color: #aaa;
   overflow-y: scroll;
}

Um einen detaillierteren Blick darauf zu werfen, wie dies funktioniert, #Contentschauen Sie sich diese jsfiddle mit Bootstrap-Zeilen und -Spalten an.

jumps4fun
quelle

"Header mit fester Pixelhöhe" -> genau das! Die bottomEigenschaft hat dafür gesorgt, dass die #Contentam Ende der Seite stecken bleiben. Ich weiß es zu schätzen, dass Sie sich die Zeit genommen haben, es zu erklären.

Armfoot

1

Und ich bin froh, dass es jemandem geholfen hat;)

jumps4fun

1

In diesem Fall möchte ich, dass mein Hauptinhaltsbereich flüssig ist, damit die gesamte Seite 100% der Browserhöhe einnimmt.

height: 100vh;

Fezal Halai
quelle

1

Bitte lassen Sie mich hier meine 5 Cent hinzufügen und eine klassische Lösung anbieten:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>

Erweitern Sie das Snippet

Dies funktioniert in allen Browsern, kein Skript, kein Flex. Öffnen Sie das Snippet im Ganzseitenmodus und ändern Sie die Größe des Browsers: Die gewünschten Proportionen bleiben auch im Vollbildmodus erhalten.

Hinweis:

Elemente mit unterschiedlicher Hintergrundfarbe können sich tatsächlich gegenseitig bedecken. Hier habe ich einen festen Rand verwendet, um sicherzustellen, dass die Elemente korrekt platziert sind.
idHeader.heightund idContent.topwerden so angepasst, dass sie den Rand einschließen, und sollten denselben Wert haben, wenn der Rand nicht verwendet wird. Andernfalls werden Elemente aus dem Ansichtsfenster entfernt, da die berechnete Breite keine Rahmen, Ränder und / oder Auffüllungen enthält.
left:0; right:0;kann width:100%aus dem gleichen Grund ersetzt werden, wenn kein Rand verwendet wird.
Das Testen auf einer separaten Seite (nicht als Snippet) erfordert keine HTML / Body-Anpassung.
In IE6 und früheren Versionen müssen wir dem Element padding-topund / oder padding-bottomAttribute hinzufügen #idOuter.

Um meine Antwort zu vervollständigen, hier ist das Fußzeilenlayout:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idContent" style="bottom:36px; top:0;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

Erweitern Sie das Snippet

Und hier ist das Layout mit Kopf- und Fußzeile:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:36px;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

Erweitern Sie das Snippet

Dmitry Babich
quelle

0

Sofern Sie IE 9 und niedriger nicht unterstützen müssen, würde ich Flexbox verwenden

body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }

Sie müssen auch Körper bekommen, um die ganze Seite zu füllen

body, html{ width:100%; height:100%; padding: 0; margin: 0;}

James Lambert
quelle

0

CSS PLaY | browserübergreifendes festes Kopf- / Fußzeilen- / zentriertes einspaltiges Layout

CSS-Frames, Version 2: Beispiel 2, angegebene Breite | 456 Berea Street

Eine wichtige Sache ist, dass, obwohl dies einfach klingt, eine Menge hässlicher Code in Ihre CSS-Datei eingehen wird, um einen solchen Effekt zu erzielen. Leider ist es wirklich die einzige Option.

Joe
quelle

Von Nur-Link-Antworten wird abgeraten. Versuchen Sie, den Code in Ihre Antwort aufzunehmen.

Benutzer, der kein Benutzer ist

0

#Header
{
width: 960px;
height: 150px;
}

#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}

Jazib Khan
quelle

-1

Die beste Lösung, die ich bisher gefunden habe, besteht darin, ein Fußzeilenelement am unteren Rand der Seite festzulegen und dann den Unterschied zwischen dem Versatz der Fußzeile und dem Element, das wir erweitern müssen, auszuwerten. z.B

Die HTML-Datei

<div id="contents"></div>
<div id="footer"></div>

Die CSS-Datei

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Die js-Datei (mit jquery)

var contents = $('#contents'); 
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');

Möglicherweise möchten Sie auch die Höhe des Inhaltselements in jeder Fenstergröße aktualisieren, also ...

$(window).on('resize', function() {
  contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});

Αλέκος
quelle

-1

Sehr einfach:

#content {
    max-height: 100%;
}

Masood
quelle

-3

Haben Sie so etwas versucht?

CSS:

.content {
    height: 100%;
    display: block;
}

HTML:

<div class=".content">
<!-- Content goes here -->
</div>

Rahul Choudhary
quelle

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

Antworten:

Hinweis:

Die HTML-Datei

Die CSS-Datei

Die js-Datei (mit jquery)