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

Nach langem Suchen und Ausprobieren hat nichts mein Problem gelöst, außer

style = "height:100%;"

für die Kinder div

und für die Eltern gilt Folgendes

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

Außerdem verwende ich Bootstrap, und das hat das Responsive bei mir nicht beschädigt.

Answer 2

Versuchen Sie, den unteren Rand auf 100 % zu setzen.

margin-bottom: 100%;

Answer 3

Hinzufügen display: grid an die Muttergesellschaft

Answer 4

Auf der Grundlage der in dieser Mitteilung beschriebenen Methode Artikel Ich habe eine dynamische .Less-Lösung erstellt:

Html:

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

Weniger:

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}

Answer 5

Ich weiß, es ist schon lange her, dass die Frage gestellt wurde, aber ich habe eine einfache Lösung gefunden und dachte, jemand könnte sie gebrauchen (sorry für das schlechte Englisch). Hier geht es:

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

Einfaches Beispiel. Beachten Sie, dass Sie in Reaktionsfähigkeit drehen können.