Machen Sie ein div-füllen Sie die Höhe des verbleibenden Platz auf dem Bildschirm

2015 update: das flexbox-Ansatz

Gibt es zwei andere Antworten kurz erwähnen flexbox; das war allerdings vor mehr als zwei Jahren, und Sie bieten keine Beispiele. Die Spezifikation für flexbox hat endgültig geklärt jetzt.

Hinweis: Wenn Sie CSS-Flexible Boxes-Layout-Spezifikation ist in der Candidate Recommendation Phase, nicht alle Browser haben es umgesetzt. WebKit-Umsetzung müssen mit einem Präfix -webkit-; Internet Explorer implementiert eine alte version der Spezifikation, mit dem Präfix -ms -, Opera 12.10 implementiert die neueste version von der Skillung, unprefixed. Finden Sie in der Kompatibilitäts-Tabelle für jede Eigenschaft für eine up-to-date-Kompatibilität-status.

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

Allen gängigen Browsern und IE11+ Unterstützung Flexbox. Für den IE 10 oder älter verwenden, können Sie die FlexieJS shim.

Überprüfen aktuelle Unterstützung können Sie auch hier sehen:
http://caniuse.com/#feat=flexbox

Beispiel arbeiten

Mit flexbox können Sie problemlos wechseln zwischen jede Ihrer Zeilen oder Spalten, die entweder mit festen Abmessungen, Inhalt-große Abmessungen oder der verbleibenden Raum-Dimensionen. In meinem Beispiel habe ich den header zu schnappen, um seinen Inhalt (gemäß den OPs-Frage), ich habe eine Fußzeile, um zu zeigen, wie Sie ein fester Höhe-region und legen Sie dann den content-Bereich zu füllen den übrigen Raum.

CSS:

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

HTML:

<!-- 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 oben, die flex Eigenschaft Kürzel der flex-grow, flex-shrink, und flex-basis Eigenschaften zu etablieren, die Flexibilität des flex-Elemente. Mozilla hat eine gute Einführung in die flexiblen Boxen-Modell.

Der ursprüngliche Beitrag ist mehr als 3 Jahren. Ich denke, viele Menschen, die zu dieser post, wie ich suchen nach einer app-ähnlichen Layouts Lösung, sagen einem irgendwie festen header, footer, und voller Höhe für die Inhalte unter den restlichen Bildschirm. Wenn ja, dieser Beitrag kann helfen, es funktioniert auf IE7+, etc.

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

Und hier sind einige Auszüge aus diesem Beitrag:

CSS:

@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. */ 
}

HTML:

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

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

Wenn Sie möchten, dass der mittlere element erstreckt sich über die gesamte Seite vertikal verwenden, können Sie calc() die eingeführt wird in CSS3.

Angenommen, wir haben eine Feste Höhe header und footer Elemente, und wir wollen, dass die section tag zu nehmen gesamte vertikale Höhe...

Demo

Angenommen markup

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

Also dein CSS sollte

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

Also hier, was Tue, ist, addieren Sie die Höhe der Elemente und als Abzug von 100% mit calc() Funktion.

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

Wie zu verwenden Sie einfach vh steht für view height im CSS...

Blick auf die code-snippet ich erstellt für Sie unten und führen Sie es:

CSS:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

HTML:

<div class="full-height">
</div>

Auch, das Bild unten sehen, die ich für Sie erstellt:

Einfache Lösung mit flexbox:

CSS:

html,
body {
  height: 100%;
}

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

.content {
  flex-grow: 1;
}

HTML:

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

Codepen-Beispiel

Eine Alternative Lösung mit einer div zentriert innerhalb des content-div

Keine der Lösungen gepostet arbeiten, wenn Sie Sie brauchen, die unteren div zu scrollen, wenn der Inhalt zu groß ist. Hier ist eine Lösung, die funktioniert in diesem Fall:

HTML:

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

CSS:

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

Original-Quelle: Füllen Sie die Verbleibende Höhe eines Behälters Während der Handhabung Overflow im CSS

JSFiddle live-Vorschau

Was für mich gearbeitet (mit einem div in einem anderen div-und ich nehme an, in allen anderen Fällen) ist die Einstellung der unteren Polsterung zu 100%. Das ist, fügen Sie diese zu Ihrem css /stylesheet:

padding-bottom: 100%;

<!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 kann man die "header" - div vor dem content, als Geschwister, und die gleichen CSS-arbeiten. Jedoch IE7 - nicht interpretieren, die Höhe ist richtig, wenn der Schwimmer ist 100% in diesem Fall also der header muss IN der Inhalte, wie oben beschrieben. Das overflow: auto wird dazu führen, doppelte scroll Balken im IE (die hat immer den viewport scrollbar sichtbar, aber deaktiviert), aber ohne Sie, wird der Inhalt clip wenn es überläuft.

Wenn Sie sich mit der nicht Unterstützung von alten Browsern (das heißt, " MSIE 9 oder ältere), können Sie dies mit Flexible Box Layout Module die bereits W3C CR. Das Modul ermöglicht auch andere nette tricks, die auch, wie umordnen der Inhalte.

Leider MSIE 9 oder weniger nicht unterstützen und Sie zu verwenden vendor-Präfix für die CSS-Eigenschaft für jeden anderen browser als Firefox. Hoffentlich anderen Anbietern fallen den Präfix auch bald.

Einer anderen Wahl wäre CSS Grid Layout aber das hat auch weniger Unterstützung von stabilen Versionen der Browser. In der Praxis, nur MSIE 10 unterstützt.

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 body (in dieser Reihenfolge) eine Höhe und nur dann geben Ihre Elemente in einer Höhe?

Funktioniert bei mir

"CSS-Grid-Lösung

Nur die Definition der body mit display:grid und die grid-template-rows mit auto und die fr value-Eigenschaft.

CSS:

* {
  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 */
}

HTML:

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

A Complete Guide zu-Raster - @ CSS-Tricks.com

Vincent, ich Antworte wieder mit Ihr neue Anforderungen. Da kümmert man sich nicht über den Inhalt wird ausgeblendet, wenn es zu lang ist, brauchen Sie nicht zu schweben, den Kopf. Setzen Sie einfach überlaufen, die versteckt auf dem html-und body-tags, und legen Sie #content Höhe bis zu 100%. Der Inhalt wird immer länger sein als der viewport, indem Sie die Höhe des header, aber es wird versteckt und nicht Scrollleisten.

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

Fand ich eine ganz einfache Lösung, weil es für mich nur ein design-Problem.
Ich wollte den rest der Seite nicht zu weiß unter der roten Fußzeile.
So habe ich den Seiten hintergrund-Farbe auf rot. Und der Inhalt Hintergrundfarbe auf weiß.
Mit dem Inhalt Höhe eingestellt zB. 20em oder 50% eine fast leere Seite nicht verlassen, die ganze Seite rot.

Ich hatte das gleiche problem aber konnte ich nicht machen, funktioniert die Lösung mit flexboxes oben. So habe ich meine eigene Vorlage, die beinhaltet:

• einen header mit einer festen Größe element
• eine Fußzeile
• eine side-bar mit einem Scrollbalken, der sich in der verbleibenden Höhe
• Inhalt

Ich verwendet flexboxes aber in einer einfachen Art und Weise, verwenden Sie nur die Eigenschaften display: flex und flex-direction: row|Spalte:

Ich tun, verwenden Sie eckige, und ich will meine Komponente Größen werden zu 100% von Ihrem übergeordneten element.

Der Schlüssel ist, um die Größe (in Prozent) für alle Eltern durchzuführen, um eine Beschränkung Ihrer Größe. Im folgenden Beispiel myapp Höhe 100% des Viewports.

Hauptbestandteil 90% des Viewports, da Kopf-und Fußzeile haben 5%.

Ich habe meine Vorlage hier: 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>

Dynamisch calc die remining Platz auf dem Bildschirm, besser mit Javascript.

Können Sie mithilfe von CSS-IN-JS-Technologie, wie unten lib:

https://github.com/cssobj/cssobj

DEMO: https://cssobj.github.io/cssobj-demo/

Wenn das einzige Problem ist die Höhe, nur mit divs scheint zu funktionieren:

<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>

In einem einfachen test, die Breite der Kopfzeile/Inhalt ist anders als in deinem Beispiel und mir, aber ich bin mir nicht sicher, aus Ihren posten, wenn Sie sind besorgt über die Breite?