Wie Kind div zu zwingen, 100% der übergeordneten div's Höhe ohne Angabe der übergeordneten Höhe sein?

Question

Ich habe eine Website mit der folgenden Struktur:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

Die Navigation befindet sich auf der linken Seite und das Inhalts-Div auf der rechten Seite. Die Informationen für das Inhalts-Div werden über PHP abgerufen, so dass sie jedes Mal anders sind.

Wie kann ich die Navigation vertikal skalieren, so dass ihre Höhe mit der Höhe des Inhalts-Divs übereinstimmt, egal welche Seite geladen wird?

Answer 1

Für die Eltern:

display: flex;

Sie sollten einige Präfixe hinzufügen, http://css-tricks.com/using-flexbox/ .

Wie @Adam Garner bemerkte, ist align-items: stretch; nicht erforderlich. Seine Verwendung ist auch für Eltern, nicht für Kinder. Wenn Sie die Dehnung von Kindern definieren möchten, verwenden Sie align-self.

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

Answer 2

ANMERKUNG : Diese Antwort gilt für ältere Browser ohne Unterstützung für den Flexbox-Standard. Für einen modernen Ansatz, siehe: https://stackoverflow.com/a/23300532/1155721

---

Ich schlage vor, dass Sie einen Blick werfen auf Gleich hohe Spalten mit Cross-Browser-CSS und ohne Hacks .

Grundsätzlich ist es nicht trivial, dies mit CSS in einer Browser-kompatiblen Weise zu tun (aber trivial mit Tabellen), also suchen Sie sich eine geeignete vorgefertigte Lösung.

Außerdem hängt die Antwort davon ab, ob Sie 100 % Höhe oder gleiche Höhe wünschen. Normalerweise ist es die gleiche Höhe. Wenn es 100 % Höhe ist, ist die Antwort etwas anders.

Answer 3

Dies ist ein frustrierendes Problem, mit dem sich Designer ständig auseinandersetzen müssen. Der Trick ist, dass Sie die Höhe auf 100% auf BODY und HTML in Ihrem CSS einstellen müssen.

html,body {
    height:100%;
}

Dieser scheinbar sinnlose Code dient dazu, dem Browser zu definieren, was 100% bedeutet. Frustrierend, ja, aber es ist der einfachste Weg.

Answer 4

Ich finde, dass die Einstellung der beiden Spalten auf display: table-cell; anstelle von float: left; funktioniert gut.

Answer 5

Wenn es Ihnen nichts ausmacht, dass das Navigations-Div im Falle eines unerwartet kurzen Inhalts-Div abgeschnitten wird, gibt es zumindest eine einfache Möglichkeit:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

Ansonsten gibt es die Fauxpas-Säulen Technik.