Wie macht man div verbleibende Höhe?

Habe ich dieses problem, ich habe zwei divs:

<div style="width:100%; height:50px;" id="div1"></div>
<div style="width:100%;" id="div2"></div>

Wie mache ich div2 besetzen Verbleibende Höhe der Seite?

Kommentar zu dem Problem
Sollte es jemals eine vertikale Bildlaufleiste? Was passiert, wenn der Inhalt innerhalb von #div2 ist größer als das Fenster? Kommentarautor: thirtydot
verwenden Sie eine Tabelle auf height=100%. verwenden Sie 2 Reihen anstelle von 2 divs Kommentarautor: Johnny Craig
Keine Tabellen verwenden, wenn es eine einfachere Lösung. Kommentarautor: Alexander Rafferty

InformationsquelleAutor der Frage | 2011-08-25

  1. 19

    Können Sie diese http://jsfiddle.net/Victornpb/S8g4E/783/

    #container {
    display: table;
    width: 400px;
    height: 400px;
}
#container > div{
    display: table-row;
    height: 0;
}
#container > div.fill{
    height: auto;
}

    Nur für die Klasse .fill einem der Kinder zu machen, dann besetzen die verbleibenden Höhe.

    <div id="container">
    <div>
        Lorem ipsum
    </div>
    <div>
        Lorem ipsum
    </div>
    <div class="fill">   <!-- this will fill the remaining height-->
        Lorem ipsum
    </div>
</div>

    Funktioniert es mit, wie viele Kinder Sie wollen, kein zusätzliches markup erforderlich ist.

    InformationsquelleAutor der Antwort Vitim.us

  2. 12

    Demo

    Ein Weg ist, um das div zu position:absolute und geben Sie es ein top-50px und unten 0px;

    #div2
{
    position:absolute;
    bottom:0px;
    top:50px
}

    InformationsquelleAutor der Antwort Joseph Marikle

  3. 6

    Da Sie wissen, wie viele Pixel besetzt sind, durch die vorherigen Inhalte, die Sie verwenden können, die calc() Funktion:

    height: calc(100% - 50px);

    InformationsquelleAutor der Antwort herman

  4. 4

    Mit CSS-Tabellen, Sie könnten wrap ein div um die beiden, die Sie dort haben, und verwenden Sie dieses css - /html-Struktur:

    <style type="text/css">
.container { display:table; width:100%; height:100%;  }
#div1 { display:table-row; height:50px; background-color:red; }
#div2 { display:table-row; background-color:blue; }
</style>

<div class="container">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

    Hängt davon ab, welche Browser unterstützt diese display-Typen sind jedoch. Ich glaube nicht, dass IE8 und unten gehen. EDIT: Kratzer,-- IE8 unterstützt die CSS-Tabellen.

    InformationsquelleAutor der Antwort Brendan

  5. 4

    Können Sie

    display: flex;

    CSS-Eigenschaft, die wie bereits erwähnt von @Ayan, aber ich habe ein funktionierendes Beispiel: https://jsfiddle.net/d2kjxd51/

    InformationsquelleAutor der Antwort Cezary Tomczyk

  6. 1

    Stand ich vor der gleichen Herausforderung, die mich und fand diese 2 Antworten mit flex Eigenschaften.

    CSS

    .container {
  display: flex;
  flex-direction: column;
}

.dynamic-element{
  flex: 1;
}

    InformationsquelleAutor der Antwort Muhammad Omar ElShourbagy

  7. 0
    <div>
  <div id="header">header</div>
  <div id="content">content</div>
  <div id="footer">footer</div>
</div>

#header {
  height: 200px;
}

#content {
  height: 100%;
  margin-bottom: -200px;
  padding-bottom: 200px;
  margin-top: -200px;
  padding-top: 200px;
}

#footer {
  height: 200px;
}

    InformationsquelleAutor der Antwort wmzy

  8. 0

    Warum nicht-Polsterung mit negativen Margen? So etwas wie dieses:

    <div class="parent">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
</div>

    Dann

    .parent {
  padding-top: 1em;
}
.child1 {
  margin-top: -1em;
  height: 1em;
}
.child2 {
  margin-top: 0;
  height: 100%;
}

    InformationsquelleAutor der Antwort kalu

Schreibe einen Kommentar