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

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.

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 .

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.

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>

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 )

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 } 

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.

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>

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

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:

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.

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

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

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!

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%;

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

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

<!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.

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%;
}

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.

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

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

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>

 style="height:100vh"

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

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>

Versuche dies

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

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.

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>

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/

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 ...

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>

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>

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>