CSS height Problem mit dem flex-box-innen flex-box

Ich habe ein problem mit flex-Boxen darin enthaltenen flex-Boxen. Die JS-Fiddle auf http://jsfiddle.net/fr077nn2/ die den folgenden code enthält:

CSS:

    #container{
      position: absolute;
      height: 100%;
      width: 100%;
      border: 3px solid yellow;
    }
    .app {
      display: flex;
      flex-direction: column;
      height: 100%;
      border: 3px solid black;
    }
    .app-header {
      border: 3px solid red;
    }
    .app-content {
      border: 3px solid green;
      flex: 1;
      overflow: hidden;
    }
    .app-footer {
      border: 3px solid blue;
    }

HTML:

   <div id="container">
      <div class="app">
        <div class="app-header">HEADER1</div>
        <div class="app-content">
          <div class="app">
            <div class="app-header">HEADER2</div>
            <div class="app-content">CONTENT2</div>
            <div class="app-footer">FOOTER2</div>
          </div>
        </div>
        <div class="app-footer">FOOTER1</div>
      </div>
    </div>

Ich versuche dem .app-content-DIVs füllen den verbleibenden Raum der Eltern .app DIV. Es funktioniert gut für die äußeren Boxen, wie gezeigt, in der fiddle. Jedoch, für die inneren Boxen, CONTENT2 nicht füllen den übrigen Raum. Ich vermute, dass height:100% funktioniert nicht in diesem Fall, weil die Höhe des übergeordneten DIV-Element nicht ordnungsgemäß bekannt... jeder Vorschlag, wie das zu erreichen ist die oben richtig?

Edit: Funktioniert auf Firefox wie erwartet, nicht auf Chrome.

  • Funktioniert gut für Firefox, das problem liegt am Chrome.
  • Zusätzliche Höhe: 100% auf die .app-Inhalte hat funktioniert... es sei denn, ich bin fehlt etwas? (Anzeige im Chrome) Aktualisiert Fiddle: jsfiddle.net/gqjx0wr8/2
  • dies führt nicht die erwartete Ausgabe: Zugabe von 100% auf .app-Inhalt wird das div mehr Speicherplatz verwendet wird, die nur den verbleibenden Platz, das ist 100% von den Eltern, daher drängen die Fußzeile außerhalb. Das Ziel ist, zu haben .app-Inhalten verwenden Sie nur den verbleibenden Platz.
  • du hast Recht, es scheint gut zu funktionieren auf FF34 und IE11. WTH Chrom...?
  • Ist mit JavaScript eine option?
  • Leider Nein. Ich möchte stick zu CSS hier. In jedem Fall, wenn Sie Chrome/webkit ist nicht vollständig kompatibel ist, würde ich eher nicht verwenden, es auf die Produktion von websites für jetzt.
  • Ihre re-Einsatz von class-Namen macht diese unneccessarily verwirrend... egal, dein code ist fast richtig. Ich habe behoben, die CSS für Sie in diese JS-Fiddle

InformationsquelleAutor Nick | 2014-12-15
  1. 8

    Generell, 100% Höhe funktioniert, wenn die Muttergesellschaft hat eine definierte Höhe. In Ihrem Beispiel, der äußerste app-Inhalte verfügen nicht über eine explizite Höhe, die ist, warum die 100% Höhe, auf der sein Kind nicht arbeiten.

    Eine einfache Lösung ist die Verwendung von relative-absolute Positionierung, um die Größe des Kindes:

    CSS:

    #container {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 3px solid yellow;
}
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 3px solid black;
}
.app-header {
  border: 3px solid red;
}
.app-content {
  border: 3px solid green;
  flex: 1;
  /* added property */
  position: relative;
}
.app-footer {
  border: 3px solid blue;
}
/* added rule */
.app-content > .app {
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
/* scrollbar and border correction */
body {
  margin: 0;
  padding: 0;
}
div {
  box-sizing: border-box;
}

    HTML:

    <div id="container">
  <div class="app">
    <div class="app-header">HEADER1</div>
    <div class="app-content">
      <div class="app">
        <div class="app-header">HEADER2</div>
        <div class="app-content">CONTENT2</div>
        <div class="app-footer">FOOTER2</div>
      </div>
    </div>
    <div class="app-footer">FOOTER1</div>
  </div>
</div>

    • Danke, nur gelöst, was ich versucht habe zu tun, den ganzen Tag. Würde upvote 10 mal, wenn ich könnte 🙂
    InformationsquelleAutor Salman A
  2. 1

    Nicht sicher, ob das OK ist /deinen Bedürfnissen passen, aber zumindest ist es flexing in Chrome + FF); P Vielleicht ein Problem beim verschachteln.

    Flex-container + flex auf Inhalt:

    http://jsfiddle.net/fr077nn2/2/

    #container{
  position: absolute;
  height: 100%;
  width: 100%;
  border: 3px solid yellow;
  display: flex;
  flex-direction: column;
}
.app {
  display: flex;
  flex-direction: column;
  border: 3px solid black;
  flex-grow: 1;
}
.app-header {
  border: 3px solid red;
}
.app-content {
  border: 3px solid green;
  overflow: hidden;
  flex-grow: 1;
  display: flex;
}
.app-footer {
  border: 3px solid blue;
}
    • Danke. Es ist ein großer workaround für Chrome, obwohl ich nicht verstehe, warum die Zugabe von display:flex entlang der gesamten DIV-Kette macht die Dinge, die hier arbeiten... konzeptionell, mit display: flex .app-Inhalte nicht sinnvoll.
    • Ich habe bei dieser Suche, und etwas verwirrt mich. Ich habe einige Probleme mit der flex in chrome selbst – und endete mit etwas hackish-Lösungen. Ich habe versucht zu finden, einige gute doc, auf der es aber haben, endete kurz so weit.
    InformationsquelleAutor Morpfh
  3. 1

    Warum nicht vereinfachen???

    Mit Ihrem aktuellen markup

    Dies scheint wie eine Menge unnötiger HTML.

    Müssen Sie zum verschachteln der flex den ganzen Weg nach unten. In diesem Beispiel wird die top-flex-container hat height: 100vh nehmen die gesamte Höhe des Viewports. Einige der flex-Kinder sind auch flex Eltern, Sie bekommen display: flex zusammen mit flex: 1 also wachsen Sie und schrumpfen Sie und Ihre Kinder erweitern können.

    Beispiel

    CSS:

    * {
  margin: 0;
  padding: 0;
  border: 0;
}
div {
  box-sizing: border-box;
}
#container {
  height: 100vh;
  border: 3px solid yellow;
  display: flex;
}
.app {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 3px solid black;
}
.app-header {
  border: 3px solid red;
}
.app-content {
  border: 3px solid green;
  display: flex;
  flex: 1;
  overflow: hidden;
}
.app-footer {
  border: 3px solid blue;
}

    HTML:

    <div id="container">
  <div class="app">
    <div class="app-header">HEADER1</div>
    <div class="app-content">
      <div class="app">
        <div class="app-header">HEADER2</div>
        <div class="app-content">CONTENT2</div>
        <div class="app-footer">FOOTER2</div>
      </div>
    </div>
    <div class="app-footer">FOOTER1</div>
  </div>
</div>

    Vereinfachtes Beispiel

    Können wir drastisch reduzieren die markup und beseitigen die Notwendigkeit, nest der flex. Der Inhalt ist gegeben flex: 1 und zu erweitern, um alle Platz auf der von der Kopf-und Fußzeilen.

    In diesem Beispiel, wird der Körper selbst die flex-container, dies könnte ersetzt werden, mit einer top-level-div-wrapper.

    CSS:

    * {
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  border: 3px solid black;
}
.app-header {
  border: 3px solid red;
}
.app-content {
  border: 3px solid green;
  flex: 1;
}
.app-footer {
  border: 3px solid blue;
}

    HTML:

    <div class="app-header">HEADER1</div>

<div class="app-header">HEADER2</div>

<div class="app-content">CONTENT2</div>

<div class="app-footer">FOOTER2</div>

<div class="app-footer">FOOTER1</div>

    • Sorry, da hätte ich genauer in der Beschreibung. Die HTML-DIVs eine Rolle spielen, die Sie eigentlich repräsentieren verschiedene Ebenen von verschachtelten Schalen (in der Praxis, mehr als 1 ist), sagen wir, dynamisch eingefügt, und für die Kopf - /Fußzeilen werden könnte, dynamisch entfernt oder ausgeblendet werden.
    InformationsquelleAutor misterManSam
Schreibe einen Kommentar