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

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

Answer 2

Für Leser des Jahres 2021:

Versuchen Sie dies:

.parent {
  position: relative;

  display: flex;                 // And you will probably need this too.
  flex-direction: row;           // or column.
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;

  align-self: center;            // And you will probably need this too.
}

Hier ist, woran ich arbeite:

Answer 3

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

Blick auf dieses Beispiel .

Answer 4

Mit jQuery:

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

Answer 5

height : <percent> funktioniert nur, wenn Sie alle übergeordneten Knoten mit der angegebenen prozentualen Höhe mit einer festen Höhe in Pixeln, ems, etc. auf oberster Ebene haben. Auf diese Weise wird die Höhe bis zu Ihrem Element kaskadiert.

Sie können 100% für html- und body-Elemente angeben, wie @Travis bereits erwähnt hat, um die Seitenhöhe bis zu den Knoten kaskadieren zu lassen.