Lassen Sie ein Div die Höhe des verbleibenden Bildschirmbereichs ausfüllen

1910

Ich arbeite an einer Webanwendung, bei der der Inhalt die Höhe des gesamten Bildschirms ausfüllen soll.

Die Seite hat eine Kopfzeile, die ein Logo und Kontoinformationen enthält. Dies kann eine beliebige Höhe sein. Ich möchte, dass der Inhaltsbereich den Rest der Seite bis zum Ende ausfüllt.

Ich habe einen Header divund einen Inhalt div. Im Moment verwende ich eine Tabelle für das Layout wie folgt:

CSS und HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

Die gesamte Höhe der Seite ist gefüllt und es ist kein Bildlauf erforderlich.

Für alles innerhalb des Inhaltsbereichs top: 0;wird es durch die Einstellung direkt unter der Kopfzeile platziert. Manchmal ist der Inhalt eine echte Tabelle, deren Höhe auf 100% eingestellt ist. Wenn Sie headerhineinstecken content, funktioniert dies nicht.

Gibt es eine Möglichkeit, den gleichen Effekt zu erzielen, ohne das zu verwenden table?

Aktualisieren:

Bei Elementen innerhalb des Inhalts divwerden die Höhen ebenfalls auf Prozentsätze festgelegt. Also etwas zu 100% in derdiv füllt es also bis zum Boden. Wie zwei Elemente bei 50%.

Update 2:

Wenn der Header beispielsweise 20% der Bildschirmhöhe einnimmt, nimmt eine mit 50% angegebene Tabelle #content40% des Bildschirmplatzes ein. Bisher funktioniert nur das Einwickeln der gesamten Sache in eine Tabelle.

Vincent McNabb
quelle
31
Für alle, die in Zukunft hier stolpern, können Sie in den meisten Browsern das gewünschte Tabellenlayout ohne Tabellenmarkierung erhalten, indem Sie display:tableund verwandte Eigenschaften verwenden. Diese Antwort auf eine sehr ähnliche Frage finden Sie in dieser Antwort .
AmeliaBR
3
Ich habe versucht, Ihr Setup zu wiederholen - jsfiddle.net/ceELs - aber es funktioniert nicht. Was vermisse ich?
Gill Bates
5
@Herr. Aliens Antwort ist einfach und nützlich. Schauen Sie unter http://stackoverflow.com/a/23323175/188784
Gohan am
4
Tatsächlich funktioniert das, was Sie beschreiben, auch bei Tabellen nicht: Wenn der Inhalt mehr vertikalen Raum als die Bildschirmhöhe einnimmt, werden die Tabellenzelle und die gesamte Tabelle über den unteren Bildschirmrand hinaus erweitert. Überlauf Ihres Inhalts: Bei auto wird keine Bildlaufleiste angezeigt.
Damien
@ GillBates es wird funktionieren, nachdem Sie die Höhe des übergeordneten Elements angegeben haben. Schauen Sie auf jsfiddle.net/ceELs/5
Michal Vašut

Antworten:

1113

Update 2015: Der Flexbox-Ansatz

Es gibt zwei weitere Antworten, in denen Flexbox kurz erwähnt wird . Das war jedoch vor mehr als zwei Jahren, und sie liefern keine Beispiele. Die Spezifikation für Flexbox hat sich jetzt definitiv festgelegt.

Hinweis: Obwohl sich die Layoutspezifikation für flexible CSS-Boxen in der Phase der Kandidatenempfehlung befindet, haben sie nicht alle Browser implementiert. Der WebKit-Implementierung muss -webkit- vorangestellt werden. Internet Explorer implementiert eine alte Version der Spezifikation mit dem Präfix -ms-. Opera 12.10 implementiert die neueste Version der Spezifikation ohne Vorzeichen. In der Kompatibilitätstabelle für jede Eigenschaft finden Sie einen aktuellen Kompatibilitätsstatus.

(entnommen aus https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes )

Alle gängigen Browser und IE11 + unterstützen Flexbox. Für IE 10 oder älter können Sie die FlexieJS-Unterlegscheibe verwenden.

Um den aktuellen Support zu überprüfen, können Sie auch hier sehen: http://caniuse.com/#feat=flexbox

Arbeitsbeispiel

Mit der Flexbox können Sie problemlos zwischen Zeilen oder Spalten mit festen Abmessungen, inhaltsgroßen Abmessungen oder verbleibenden Abmessungen wechseln. In meinem Beispiel habe ich den Header so eingestellt, dass er an seinem Inhalt ausgerichtet wird (gemäß der Frage des OP). Ich habe eine Fußzeile hinzugefügt, um zu zeigen, wie ein Bereich mit fester Höhe hinzugefügt wird, und dann den Inhaltsbereich so eingestellt, dass der verbleibende Speicherplatz ausgefüllt wird.

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

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

In der CSS über das Flex - Eigenschaft Kürzel des Flex-grow , flex-Schrumpf und Flex-Basis Eigenschaften die Flexibilität der flexiblen Elemente zu etablieren. Mozilla hat eine gute Einführung in das Modell der flexiblen Boxen .

Pebbl
quelle
9
Warum wird das flex: 0 1 30px;Attribut box .rowin jedem Div überschrieben?
Erdal G.
11
Hier ist die Browser-Unterstützung für Flexbox - schön, all das Grün zu sehen - caniuse.com/#feat=flexbox
Brian Burns
1
Der Link zu Flexie.js ist tot. Hier das Github-Projekt github.com/doctyper/flexie
ses3ion
52
Auf jeden Fall ist es ein sehr guter Ansatz und es funktioniert fast;) Es gibt ein kleines Problem, wenn ein Inhalt von div.content eine ursprüngliche gebogene Höhe überschreitet. In der aktuellen Implementierung wird die "Fußzeile" niedriger gedrückt und dies ist nicht das, was die Entwickler erwarten;) Also habe ich eine sehr einfache Lösung gefunden. jsfiddle.net/przemcio/xLhLuzf9/3 Ich habe zusätzlichen Flex für Container und Überlauf hinzugefügt.
Przemcio
12
@przemcio netter Punkt, aber ich denke nicht, dass jeder Entwickler einen scrollbaren Inhalt erwartet;) - Sie sollten nur hinzufügen müssen, um overflow-y: autodas .row.contentzu erreichen, was Sie benötigen.
Pebbl
226

Es gibt wirklich keine solide, browserübergreifende Möglichkeit, dies in CSS zu tun. Angenommen, Ihr Layout ist komplex, müssen Sie JavaScript verwenden, um die Höhe des Elements festzulegen. Das Wesentliche an dem, was Sie tun müssen, ist:

Element Height = Viewport height - element.offset.top - desired bottom margin

Sobald Sie diesen Wert erhalten und die Höhe des Elements festlegen können, müssen Sie Ereignishandler sowohl an das Fenster onload als auch an onresize anhängen, damit Sie Ihre Größenänderungsfunktion auslösen können.

Angenommen, Ihr Inhalt könnte größer als das Ansichtsfenster sein, müssen Sie zum Scrollen den Überlauf y festlegen.

NICCAI
quelle
2
Das habe ich vermutet. Die App funktioniert jedoch auch mit deaktiviertem Javascript. Ich denke, ich werde die Tabelle einfach weiter verwenden.
Vincent McNabb
6
Vincent, wie du dich behaupten kannst. Ich wollte genau das Gleiche tun und es scheint mit CSS nicht möglich zu sein? Ich bin mir nicht sicher, aber unabhängig davon macht keine der anderen Tonnen von Lösungen das, was Sie beschrieben haben. Das Javascript ist das einzige, das an dieser Stelle korrekt funktioniert.
Travis
5
was ist, wenn Fensterhöhe ändert
Techsin
4
Ich meine ... warum verwenden wir 2013 kein Calc?
Kamii
4
Höhe: berechnet (100vh - 400px); ist ein gültiger CSS-Stil, der genau das tut, worum es in diesem Beitrag geht. Alle anderen Lösungen setzen eine feste übergeordnete Höhe oder Blockanzeige voraus.
WilliamX
167

Der ursprüngliche Beitrag ist vor mehr als 3 Jahren. Ich denke, viele Leute, die wie ich zu diesem Beitrag kommen, suchen nach einer App-ähnlichen Layoutlösung, sagen wir, dass ein irgendwie fester Header, eine Fußzeile und Inhalte in voller Höhe den Restbildschirm einnehmen. Wenn ja, kann dieser Beitrag helfen, es funktioniert auf IE7 + usw.

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Und hier sind einige Ausschnitte aus diesem Beitrag:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}
<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>

h - n
quelle
74
Hier gibt es nur ein Problem: Kopf- und Fußzeile werden nicht automatisch angepasst. Das ist die eigentliche Schwierigkeit, und dass deshalb ein „dies nicht möglich ist“ Antwort ist zur Zeit an der Spitze ...
Roman Starkov
Ich brauchte einen 55px-Header und einen Div, der den Rest der Dokumenthöhe ausfüllt. Das ist die Lösung!
Matías Cánepa
Du bist die Bombe, ich habe das so lange versucht und dies ist die einzige Lösung, die ich gefunden habe. Ich brauchte ein Navigationselement von 60 Pixel Höhe oben und einen Rest von 100%. Dies löste das Problem.
Adam Waite
Dies funktioniert gut, außer ich habe ein kleines Problem - wenn ich ein Element mit display: tablein den Körper stecke, scheint es den Körper zu überfluten. Das height: 100%ergibt also nicht die richtige Höhe.
GSTAR
4
.colwird nicht verwendet, oder?
Slartidan
143

Anstatt Tabellen im Markup zu verwenden, können Sie auch CSS-Tabellen verwenden.

Markup

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(Relevantes) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1 und FIDDLE2

Einige Vorteile dieser Methode sind:

1) Weniger Aufschlag

2) Markup ist semantischer als Tabellen, da es sich nicht um tabellarische Daten handelt.

3) Browser-Unterstützung ist sehr gut : IE8 +, Alle modernen Browser und Mobilgeräte ( caniuse )


Der Vollständigkeit halber sind hier die entsprechenden HTML-Elemente zu den CSS- Eigenschaften für das CSS-Tabellenmodell aufgeführt

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 
Danield
quelle
3
Ich wurde nur auf die Technik der CSS-Tabellen hingewiesen . Es stellte sich heraus, dass die Antwort bereits in dieser beantworteten Frage war. Dies ist die beste Lösung; sauber, elegant und mit dem genauen Werkzeug genau so, wie es beabsichtigt war. CSS-Tabellen
Ian Boyd
Der Geigencode stimmt hier nicht ganz mit der Antwort überein. Das Hinzufügen html, body { height: 100%, width: 100% }schien in meinen Tests kritisch zu sein.
mlibby
8
Eine ärgerliche Funktion von CSS-Tabellen ist genau die gleiche wie bei normalen Tabellen: Wenn der Inhalt zu groß ist, wird die Zelle entsprechend erweitert. Dies bedeutet, dass Sie möglicherweise noch die Größe (maximale Höhe) begrenzen oder die Höhe aus dem Code festlegen müssen, wenn die Seite dynamisch ist. Ich vermisse Silverlight-Gitter wirklich! :(
Gone Coding
3
Sie können jederzeit einen absolut positionierten Container innerhalb des Tabellenzeilenelements hinzufügen und dann dessen Breite und Höhe auf 100% festlegen. Denken Sie daran, die Position auch für das Tabellenzeilenelement auf relativ zu setzen.
Mike Mellor
1
@MikeMellor funktioniert jedoch nicht in IE11, da es die relativePositionierung auf dem table-rowElement zu ignorieren scheint und daher die Höhe des zuerst positionierten Aszendenten annimmt, der kein Tabellenelement ist.
Dwelle
96

Nur CSS-Ansatz (Wenn die Höhe bekannt / fest ist)

Wenn Sie möchten, dass sich das mittlere Element vertikal über die gesamte Seite erstreckt, können Sie calc()das in CSS3 eingeführte Element verwenden .

Angenommen, wir haben eine feste Höhe header und festefooter Elemente und möchten, dass das sectionTag die gesamte verfügbare vertikale Höhe einnimmt ...

Demo

Angenommenes Markup und Ihr CSS sollten sein

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background: grey;
}

section {
  height: calc(100% - (100px + 150px));
  /* Adding 100px of header and 150px of footer */
  background: tomato;
}

footer {
  height: 150px;
  background-color: blue;
}
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

Was ich hier mache, ist, die Höhe der Elemente zu addieren und dann von der 100%Verwendung abzuziehencalc() Funktion ab.

Stellen Sie einfach sicher, dass Sie height: 100%;für die übergeordneten Elemente verwenden.

Mr. Alien
quelle
13
Das OP sagte, dass der Header eine beliebige Höhe haben könnte. Wenn Sie die Höhe nicht im Voraus kennen, können Sie
calc
1
@ Danield Deshalb habe ich feste Höhe erwähnt :)
Mr. Alien
3
Dies ist die Lösung, die für mich funktioniert hat und bei der ich meine vorhandenen Seiten nicht um Flexboxen herum neu gestalten musste. Wenn Sie WENIGER verwenden, dh Bootstrap, lesen Sie unbedingt den Coderwall- Beitrag, wie Sie der Funktion calc () entkommen können, damit WENIGER nicht damit umgeht.
Jlyonsmith
1
Op sagte 'Dies könnte eine beliebige Höhe sein'. Willkürliche Mittel vom Designer festgelegt, also festgelegt. Diese Lösung ist bei weitem die beste.
Jck
57

Benutzt: height: calc(100vh - 110px);

Code:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  
<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>

nguyên
quelle
1
Meiner Meinung nach die sauberste Lösung. Es ist sicher besser als Javascript hinzuzufügen. (aber die Antwort wurde bereits im Jahr 2015 von jemand anderem gepostet)
bvdb
das fühlt sich viel sauberer an.
Programmierer
44

Eine einfache Lösung mit Flexbox:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}
<body>
  <div>header</div>
  <div class="content"></div>
</body>

Codepen-Beispiel

Eine alternative Lösung, bei der ein div innerhalb des Inhalts div zentriert ist

zok
quelle
4
Dies ist mit Sicherheit die beste Antwort. Funktioniert wie ein Zauber für Helden-img-Homepages oder eine Kombination aus Helden-img mit Ihrer Navigationsleiste
noobcoderiam
jsfiddle.net/31ng75du/5 Getestet mit Chrome, FF, Edge, Vivaldi
user2360831
Das ist einfach und am besten.
Dev Anand
38

Wie wäre es, wenn Sie einfach das verwenden, vhwofür view heightin CSS steht ...

Schauen Sie sich das Code-Snippet an, das ich unten für Sie erstellt habe, und führen Sie es aus:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

Schauen Sie sich auch das Bild an, das ich für Sie erstellt habe:

Lassen Sie ein Div die Höhe des verbleibenden Bildschirmbereichs ausfüllen

Alireza
quelle
10
Das ist nur gut, wenn Sie möchten, dass ein Div die gesamte Höhe des Fensters überspannt. Setzen Sie nun einen Header div mit unbekannter Höhe darüber.
LarryBud
@ LarryBud Sie haben Recht, das macht den Wrapper Div, also sollte alles in diesen Div gehen ...
Alireza
34

CSS3 Einfacher Weg

height: calc(100% - 10px); // 10px is height of your first div...

Alle gängigen Browser unterstützen dies heutzutage. Fahren Sie fort, wenn Sie keine Vintage-Browser unterstützen müssen.

dev.meghraj
quelle
4
Dies funktioniert nicht, wenn Sie die Höhe der anderen Elemente nicht kennen (z. B. wenn sie eine variable Anzahl von untergeordneten Elementen enthalten).
Ege Ersoz
Sie können auch 100vh verwenden, jeder, der dies tut: Achten Sie darauf, Leerzeichen zwischen dem Minus und den Elementen zu setzen
htafoya
28

Es könnte rein gemacht werden CSSmit vh:

#page {
    display:block; 
    width:100%; 
    height:95vh !important; 
    overflow:hidden;
}

#tdcontent {
    float:left; 
    width:100%; 
    display:block;
}

#content {      
    float:left; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow:scroll;
}

und der HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

Ich habe es, es in allen gängigen Browsern funktioniert: Chrome, IE, undFireFox

Ormoz
quelle
2
Wow, noch nie gehört vhund vwEinheiten vor. Weitere Informationen: snook.ca/archives/html_and_css/vm-vh-units
Steve Bennett
Leider unterstützt dies nicht IE8 :(
Scott
2
Ich habe versucht , diesen Ansatz, aber die height: 100%auf #contentverursacht seine Höhe , dass der anzupassen #page, ohne auf #tdcontentinsgesamt ‚s Höhe. Bei viel Inhalt erstreckt sich die Bildlaufleiste über den unteren Rand der Seite hinaus.
Brandon
28

Keine der veröffentlichten Lösungen funktioniert, wenn Sie das untere Div zum Scrollen benötigen, wenn der Inhalt zu groß ist. Hier ist eine Lösung, die in diesem Fall funktioniert:

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.container {
  width: 400px;
  height: 300px;
}

.header {
  background: cyan;
}

.body {
  background: yellow;
  height: 100%;
}

.body-content-outer-wrapper {
  height: 100%;
}

.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}

.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

Originalquelle: Füllen der verbleibenden Höhe eines Containers beim Behandeln des Überlaufs in CSS

JSFiddle Live-Vorschau

John Kurlak
quelle
Vielen Dank!!! Ich habe alle Antworten ohne Tabelle und ohne Flexbox ausprobiert, und dies ist die einzige, die zu 100% korrekt funktioniert hat. Eine Frage: Die Originalquelle hat nur eine body-content-wrapper, und die Dinge scheinen ohne den Double Wrapper (ohne table-cells) gut zu funktionieren . Gibt es ein Problem damit?
Brandon
1
@BrandonMintern Wenn Sie nicht über die Tabellenzellen verfügen, funktioniert dies in IE8 und IE9 nicht. (Siehe Kommentar im Originalartikel.)
John Kurlak
Ja, die Zellen werden auch in IE10 benötigt. Leider entspricht die .bodyHöhe in IE10 und darunter der Höhe der eingestellten Höhe .container. Die vertikale Bildlaufleiste befindet sich immer noch an der richtigen Stelle, aber die wird .containeram Ende größer gedehnt als wir wollen. Wenn es sich um einen Vollbildmodus handelt, .bodybefindet sich der untere Rand des unteren Bildschirms.
Brandon
Vielen Dank, @JohnKurlak. Es ist die einzige Lösung, die in meiner Situation funktioniert hat (Flexbox Way wurde durch ein fehlerhaftes Verhalten in einer bestimmten Version von Chrome blockiert, die von meinem Client verwendet wurde)
Maksym Demidas
Heiliger ****! Ich habe so lange nach dieser Antwort gesucht! Ich danke dir sehr. Flexbox funktionierte hier nicht, aber Tabellenzellen tatsächlich. Tolle.
Aabbccsmith
25

Ich habe auch nach einer Antwort gesucht. Wenn Sie das Glück haben, auf IE8 und höher abzielen zu können, können Sie display:tableund verwandte Werte verwenden, um die Renderregeln von Tabellen mit Elementen auf Blockebene einschließlich div abzurufen.

Wenn Sie noch mehr Glück haben und Ihre Benutzer erstklassige Browser verwenden (z. B. wenn es sich um eine Intranet-App auf Computern handelt, die Sie steuern, wie es mein aktuelles Projekt ist), können Sie das neue flexible Box-Layout in CSS3 verwenden!

Chris
quelle
22

Was für mich funktioniert hat (mit einem Div innerhalb eines anderen Div und ich nehme unter allen anderen Umständen an), ist, die untere Polsterung auf 100% zu setzen. Das heißt, fügen Sie dies Ihrem CSS / Stylesheet hinzu:

padding-bottom: 100%;
Tonye - True Vine Productions
quelle
14
100% von was? Wenn ich das versuche, bekomme ich eine riesige Leerstelle und das Scrollen beginnt.
mlibby
100% der Ansichtsfenstergröße möglicherweise @mlibby. Wenn Sie Ihr HTML und Ihren Körper ebenfalls auf 100% Höhe einstellen, kann der Div 100% gehen. Mit nur einem Div sind die 100% relativ zum Div-Inhalt. Ich habe es nicht mit einem verschachtelten Div versucht.
Jess
1
Dies bedeutet 100% der Höhe des Elements (hinzugefügt als Polsterung des Elements), wodurch es die Höhe verdoppelt. Keine Gewissheit, dass es die Seite füllen wird, und definitiv nicht die Antwort auf die Frage. Es kann, wie bereits erwähnt, tatsächlich mehr als das Ansichtsfenster füllen.
Martin
2
Polsterung unten: 100% setzt Höhe + 100% der Breite
Romeno
1
from w3school: Gibt eine untere Polsterung in Prozent der Breite des Elements an. w3schools.com/cssref/pr_padding-bottom.asp
mehdi.loa
21

Haftungsausschluss: Die akzeptierte Antwort gibt die Idee der Lösung wieder, aber ich finde sie etwas aufgebläht mit unnötigen Wrapper- und CSS-Regeln. Unten finden Sie eine Lösung mit sehr wenigen CSS-Regeln.

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

Die obige Lösung verwendet Ansichtsfenstereinheiten und Flexbox und ist daher IE10 +, vorausgesetzt, Sie verwenden die alte Syntax für IE10.

Codepen zum Spielen: Link zum Codepen

Oder dieses für diejenigen, bei denen der Hauptcontainer bei überfülltem Inhalt scrollbar sein muss: Link zum Codepen

Michael P. Bazos
quelle
Haupthöhe: 10px; Flex: 1; Überlauf: auto}
Naeem Baghi
2
Nachdem Sie Stunden verschwendet und mehrere Ansätze getestet hatten, war dieser der beste! Es ist prägnant, einfach und intelligent.
Marciowb
19

Es gibt jetzt eine Menge Antworten, aber ich habe sie gefunden height: 100vh; dem div-Element arbeite, das den gesamten verfügbaren vertikalen Raum ausfüllen muss.

Auf diese Weise muss ich nicht mit der Anzeige oder Positionierung herumspielen. Dies war praktisch, wenn ich Bootstrap verwendete, um ein Dashboard zu erstellen, in dem ich eine Seitenleiste und eine Hauptleiste hatte. Ich wollte, dass die Hauptleitung den gesamten vertikalen Raum dehnt und ausfüllt, damit ich eine Hintergrundfarbe auftragen kann.

div {
    height: 100vh;
}

Unterstützt IE9 und höher: Klicken Sie hier, um den Link anzuzeigen

puiu
quelle
14
Aber 100vh klingt nach der ganzen Höhe, nicht nach der Resthöhe. Was ist, wenn Sie einen Header haben und dann den Rest füllen möchten
Epirocks
14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

In allen vernünftigen Browsern können Sie das "Header" -Div als Geschwister vor den Inhalt stellen, und dasselbe CSS funktioniert. IE7- interpretiert die Höhe jedoch nicht richtig, wenn der Gleitkommawert in diesem Fall 100% beträgt. Daher muss sich der Header wie oben im Inhalt befinden. Der Überlauf: auto führt im IE zu doppelten Bildlaufleisten (in denen die Bildlaufleiste des Ansichtsfensters immer sichtbar, aber deaktiviert ist). Ohne diese Funktion wird der Inhalt jedoch abgeschnitten, wenn er überläuft.

Jerph
quelle
Schließen! Fast das, was ich will, außer dass ich andere Dinge in der div... positionieren top: 0;werde, dh etwas direkt unter den Header setzen werde. Ich werde meine Frage noch einmal ändern, weil Sie sie perfekt beantwortet haben und immer noch nicht das, was ich will! Ich werde nur den Überlauf ausblenden, da der Inhalt passen muss.
Vincent McNabb
-1: Diese Antwort erstellt einen Div namens Inhalt, der den gesamten Bildschirm abdeckt, nicht den Rest des Bildschirms
Casebash
11

Ich rang eine Weile damit und endete mit Folgendem:

Da es einfach ist, den Inhalt DIV auf die gleiche Höhe wie den übergeordneten Inhalt zu bringen, aber anscheinend schwierig ist, ihn auf die übergeordnete Höhe abzüglich der Kopfzeile zu bringen, habe ich beschlossen, den Inhalt div auf die volle Höhe zu bringen, ihn aber absolut in der oberen linken Ecke zu positionieren und dann einen Abstand zu definieren für die Oberseite, die die Höhe des Headers hat. Auf diese Weise wird der Inhalt ordentlich unter der Kopfzeile angezeigt und füllt den gesamten verbleibenden Platz aus:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}
B_G
quelle
15
Was ist, wenn Sie die Höhe des Headers nicht kennen?
Yugal Jindle
11

Wenn Sie damit umgehen können, dass alte Browser (dh MSIE 9 oder älter) nicht unterstützt werden, können Sie dies mit dem Flexible Box Layout Module tun das bereits W3C CR ist. Dieses Modul ermöglicht auch andere nette Tricks, wie das Nachbestellen von Inhalten.

Leider unterstützt MSIE 9 oder weniger dies nicht und Sie müssen für jeden anderen Browser als Firefox das Herstellerpräfix für die CSS-Eigenschaft verwenden. Hoffentlich lassen auch andere Anbieter das Präfix bald fallen.

Eine andere Möglichkeit wäre das CSS-Grid-Layout , das jedoch von stabilen Browserversionen noch weniger unterstützt wird. In der Praxis unterstützt dies nur MSIE 10.

Update Jahr 2020 : Alle modernen Browser unterstützen sowohl display: flexund display: grid. Das einzige, was fehlt, ist die Unterstützung, subgriddie nur von Firefox unterstützt wird. Beachten Sie, dass MSIE auch von der Spezifikation nicht unterstützt wird. Wenn Sie jedoch bereit sind, MSIE-spezifische CSS-Hacks hinzuzufügen, kann dies zu einem Verhalten führen. Ich würde vorschlagen, MSIE einfach zu ignorieren, da selbst Microsoft sagt, dass es nicht mehr verwendet werden sollte.

Mikko Rantalainen
quelle
10

CSS-Grid-Lösung

Definieren Sie einfach die Eigenschaft bodywith display:gridund grid-template-rowsusing autound frvalue.

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

Eine vollständige Anleitung zu Grids @ CSS-Tricks.com

Paulie_D
quelle
9

Warum nicht einfach so?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

Geben Sie HTML und Körper (in dieser Reihenfolge) eine Höhe und geben Sie Ihren Elementen dann einfach eine Höhe?

Funktioniert bei mir

Thaoms
quelle
Die Sache ist, wenn ein Benutzer einen großen Bildschirm verwendet, um diese Seite zu überprüfen, und die Höhe Ihres Headers genau 100px festgelegt ist, was kleiner als 40% der aktuellen Höhe ist, gibt es eine große leere Lücke zwischen Ihrem Header und dem Body-Kontext.
Saorikido
8

Sie können display: tableden Bereich tatsächlich in zwei Elemente (Kopfzeile und Inhalt) aufteilen, wobei die Höhe der Kopfzeile variieren kann und der Inhalt den verbleibenden Raum ausfüllt. Dies funktioniert mit der gesamten Seite sowie wenn der Bereich einfach der Inhalt eines anderen Elements ist, das mit positionset auf oder positioniert relativeist . Dies funktioniert so lange, wie das übergeordnete Element eine Höhe ungleich Null hat.absolutefixed

Siehe diese Geige und auch den Code unten:

CSS:

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>
Greg
quelle
2
Eine gute Antwort, die ich positiv bewertet habe, funktioniert aber leider nicht mit IE8, das es noch lange geben wird.
Vincent McNabb
Anwendungen wie Google Mail verwenden Javascript für die Größenbestimmung. Dies ist in den meisten Fällen ohnehin eine bessere Lösung als CSS.
Vincent McNabb
Ich denke, sie verwenden Javascript, weil es keine andere gute browserübergreifende CSS-Lösung gibt, nicht weil es besser ist.
Greg
1
@VincentMcNabb Funktioniert in IE8 w3schools.com/cssref/pr_class_display.asp . Benötigt nur! DOCTYPE-Deklaration. Ich wusste noch nie etwas über einen Tabellenwert für das Anzeigeattribut. Kühle Lösung. +1
Govind Rai
8
 style="height:100vh"

löste das Problem für mich. In meinem Fall habe ich dies auf das erforderliche div angewendet

Zohab Ali
quelle
6

Vincent, ich werde wieder mit deinen neuen Anforderungen antworten. Da es Ihnen egal ist, ob der Inhalt ausgeblendet wird, wenn er zu lang ist, müssen Sie den Header nicht schweben lassen. Setzen Sie einfach einen Überlauf auf die HTML- und Body-Tags und stellen Sie die #contentHöhe auf 100% ein. Der Inhalt ist um die Höhe der Kopfzeile immer länger als das Ansichtsfenster, wird jedoch ausgeblendet und verursacht keine Bildlaufleisten.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>
Jerph
quelle
Daran habe ich schon gedacht. Aber es funktioniert auch nicht. Ich bleibe einfach bei einem, tableweil es funktioniert. Danke für das Update.
Vincent McNabb
5

Versuche dies

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
Arun
quelle
4

Ich habe eine recht einfache Lösung gefunden, weil es für mich nur ein Designproblem war. Ich wollte, dass der Rest der Seite unter der roten Fußzeile nicht weiß ist. Also habe ich die Hintergrundfarbe der Seiten auf Rot gesetzt. Und der Inhalt Hintergrundfarbe zu weiß. Bei eingestellter Inhaltshöhe z. 20em oder 50% eine fast leere Seite lässt nicht die ganze Seite rot.

htho
quelle
4

Ich hatte das gleiche Problem, konnte aber mit den oben genannten Flexboxen keine Lösung finden. Also habe ich meine eigene Vorlage erstellt, die Folgendes beinhaltet:

  • eine Kopfzeile mit einem Element fester Größe
  • eine Fußzeile
  • eine Seitenleiste mit einer Bildlaufleiste, die die verbleibende Höhe einnimmt
  • Inhalt

Ich habe Flexboxen verwendet, aber auf einfachere Weise, wobei nur die Eigenschaften angezeigt wurden: Anzeige und Flex-Richtung: Zeile | Spalte :

Ich verwende Angular und möchte, dass meine Komponentengrößen 100% des übergeordneten Elements betragen.

Der Schlüssel besteht darin, die Größe (in Prozent) für alle Eltern festzulegen, um ihre Größe zu begrenzen. Im folgenden Beispiel hat die myapp-Höhe 100% des Ansichtsfensters.

Die Hauptkomponente hat 90% des Ansichtsfensters, da Kopf- und Fußzeile 5% haben.

Ich habe meine Vorlage hier veröffentlicht: https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>
Anthony Brenelière
quelle
4

Für die mobile App verwende ich nur VH und VW

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

Demo - https://jsfiddle.net/u763ck92/

grinmax
quelle
3
Dies ist nicht die richtige Lösung. vh ist in mobilen Browsern inkonsistent. Weitere Informationen finden Sie hier: stackoverflow.com/questions/37112218/…
HarshMarshmallow
3

Aus der Idee von Mr. Alien ...

Dies scheint eine sauberere Lösung zu sein als die beliebte Flexbox für CSS3-fähige Browser.

Verwenden Sie einfach die minimale Höhe (anstelle der Höhe) mit calc () für den Inhaltsblock.

Das calc () beginnt mit 100% und subtrahiert die Höhe der Kopf- und Fußzeilen (muss Füllwerte enthalten).

Die Verwendung von "min-height" anstelle von "height" ist besonders nützlich, damit mit mit Javascript gerenderten Inhalten und JS-Frameworks wie Angular2 gearbeitet werden kann. Andernfalls wird die Fußzeile bei der Berechnung nicht an den unteren Rand der Seite verschoben, sobald der mit Javascript gerenderte Inhalt sichtbar ist.

Hier ist ein einfaches Beispiel für eine Kopf- und Fußzeile mit einer Höhe von 50 Pixel und einer Polsterung von 20 Pixel für beide.

Html:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

CSS:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

Natürlich kann die Mathematik vereinfacht werden, aber Sie bekommen die Idee ...

Pat M.
quelle
3

In Bootstrap:

CSS-Stile:

html, body {
    height: 100%;
}

1) Füllen Sie einfach die Höhe des verbleibenden Bildschirmbereichs aus:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1>

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

! [Bildbeschreibung hier eingeben


2) Füllen Sie die Höhe des verbleibenden Bildschirmbereichs aus und richten Sie den Inhalt an der Mitte des übergeordneten Elements aus:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

! [Bildbeschreibung hier eingeben

Gadolf
quelle
1

Dies ist meine eigene Minimalversion von Pebbls Lösung. Es hat ewig gedauert, den Trick zu finden, um es in IE11 zum Laufen zu bringen. (Auch in Chrome, Firefox, Edge und Safari getestet.)

<!DOCTYPE html>
<html>
<head>
<style>
html {
    height: 100%;
    }
body {
    height: 100%;
    margin: 0;
    }
section {
    display: flex;
    flex-direction: column;
    height: 100%;
    }
div:first-child {
    background: gold;
    }
div:last-child {
    background: plum;
    flex-grow: 1;
    }
</style>
</head>
<body>
    <section>
      <div>FIT</div>
      <div>GROW</div>
    </section>
</body>
</html>
Michael Schade
quelle