Wie kann man erzwingen, dass das Kind-Div 100% der Größe des Eltern-Div beträgt, ohne die Größe des Elternteils anzugeben?

Ich habe eine Seite mit folgender 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 links und der Inhaltsbereich rechts. Die Informationen für den Inhaltsbereich werden über PHP abgerufen, sodass sie jedes Mal anders sind.

Wie kann ich die Navigation vertikal skalieren, sodass ihre Höhe der Höhe des Inhaltsbereichs entspricht, unabhängig davon, welche Seite geladen wird?

HINWEIS : Diese Antwort gilt für ältere Browser ohne Unterstützung des Flexbox-Standards. Einen modernen Ansatz finden Sie unter: https://stackoverflow.com/a/23300532/1155721

Ich schlage vor, Sie werfen einen Blick auf Spalten gleicher Höhe mit browserübergreifendem CSS und No Hacks .

Grundsätzlich ist es nicht trivial, dies mit CSS auf browserkompatible Weise zu tun (aber mit Tabellen trivial). Suchen Sie sich also eine geeignete vorgefertigte Lösung.

Die Antwort hängt auch davon ab, ob Sie 100% Höhe oder gleiche Höhe wünschen. Normalerweise ist es gleich hoch. Wenn es 100% Höhe ist, ist die Antwort etwas anders.

Für die Eltern:

display: flex;

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

Bearbeiten: Wie @Adam Garner feststellte, Elemente ausrichten: strecken; wird nicht gebraucht. Seine Verwendung ist auch für Eltern, nicht für Kinder. Wenn Sie das Dehnen 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>

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

html,body {
    height:100%;
}

Dieser scheinbar sinnlose Code soll dem Browser definieren, was 100% bedeutet. Frustrierend, ja, aber der einfachste Weg.

Ich finde, dass das Setzen der beiden Spalten auf display: table-cell;anstatt float: left;gut funktioniert.

Wenn es Ihnen nichts ausmacht, dass das Navigations-Div im Falle eines unerwartet kurzen Inhalts-Divs abgeschnitten wird, gibt es mindestens einen einfachen Weg:

#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 Faux- Column - Technik.

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

Verwenden von 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();
});

Versuchen Sie, den unteren Rand zu 100% zu machen.

margin-bottom: 100%;

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

Schauen Sie sich dieses Beispiel an .

height : <percent>funktioniert nur, wenn Sie alle übergeordneten Knoten mit der angegebenen prozentualen Höhe und einer festen Höhe in Pixel, ems usw. auf der obersten Ebene haben. Auf diese Weise wird die Höhe auf Ihr Element herabgesetzt.

Sie können 100% für HTML- und Body-Elemente angeben, wie bereits bei @Travis angegeben, damit die Seitenhöhe auf Ihre Knoten herabfällt.

Nach langem Suchen und Ausprobieren löste nichts mein Problem außer

style = "height:100%;"

auf die Kinder div

und für Eltern wenden Sie dies an

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

Außerdem verwende ich Bootstrap und dies hat die Reaktion für mich nicht beschädigt.

Basierend auf der in diesem Artikel beschriebenen Methode habe ich eine .Less dynamische 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;
            }
        }
    }
}

display: gridZum übergeordneten Element hinzufügen

Ich weiß, dass es eine lange Zeit her ist, seit die Frage gestellt wurde, aber ich fand eine einfache Lösung und dachte, jemand könnte sie verwenden (Entschuldigung für das schlechte Englisch). Hier kommt's:

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 sich in Reaktionsfähigkeit verwandeln können.

Meine Lösung:

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});

Der Titel und der Inhalt der Frage enthalten einen gewissen Widerspruch. Der Titel spricht von einem übergeordneten Div, aber die Frage lässt es so klingen, als ob Sie möchten, dass zwei Geschwister-Divs (Navigation und Inhalt) dieselbe Höhe haben.

Möchten Sie (a), dass sowohl Navigation als auch Inhalt 100% der Höhe von main entsprechen, oder (b) dass Navigation und Inhalt dieselbe Höhe haben?

Ich gehe davon aus, dass (b) ... wenn dem so ist, denke ich nicht, dass Sie dies angesichts Ihrer aktuellen Seitenstruktur tun können (zumindest nicht mit reinem CSS und ohne Skripterstellung). Sie müssten wahrscheinlich etwas tun wie:

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

und stellen Sie das Inhalts-Div so ein, dass es einen linken Rand hat, unabhängig von der Breite des Navigationsbereichs. Auf diese Weise befindet sich der Inhalt des Inhalts rechts von der Navigation und Sie können das Navigations-Div auf 100% der Höhe des Inhalts einstellen.

BEARBEITEN: Ich mache das komplett in meinem Kopf, aber Sie müssten wahrscheinlich auch den linken Rand des Navigationsbereichs auf einen negativen Wert setzen oder den absoluten linken Wert auf 0 setzen, um ihn ganz nach links zurückzuschieben. Das Problem ist, dass es viele Möglichkeiten gibt, dies zu erreichen, aber nicht alle sind mit allen Browsern kompatibel.

[Ich beziehe mich in einer anderen Antwort auf Dmitys Less-Code] Ich vermute, dass dies eine Art "Pseudocode" ist?

Soweit ich weiß, versuchen Sie es mit der Faux-Column-Technik, die den Trick machen sollte.

http://www.alistapart.com/articles/fauxcolumns/

Hoffe das hilft :)

Dieser Trick funktioniert: Hinzufügen eines letzten Elements in Ihrem HTML-Abschnitt mit einem klaren Stil: beides;

    <div style="clear:both;"></div>

Alles davor wird in der Höhe enthalten sein.

gibt position: absolute;das Kind gearbeitet in meinem Fall

Sie verwenden CSS Flexbox

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

Diese Antwort ist nicht mehr ideal, da CSS-Flexbox und -Raster in CSS implementiert wurden. Es ist jedoch immer noch eine funktionierende Lösung

Auf einem kleineren Bildschirm möchten Sie wahrscheinlich die Höhe automatisch beibehalten, da col1, col2 und col3 aufeinander gestapelt sind.

Nach einem Medienabfrage-Haltepunkt möchten Sie jedoch, dass Spalten nebeneinander mit der gleichen Höhe für alle Spalten angezeigt werden.

1125 px ist nur ein Beispiel für einen Haltepunkt für die Fensterbreite, nach dem alle Spalten auf die gleiche Höhe eingestellt werden sollen.

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

Sie können natürlich bei Bedarf weitere Haltepunkte festlegen.

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            let vraperH = $('.wraper').height();
            if (window.innerWidth>= 1125) {
              $('.col1').height(vraperH);
              $('.col2').height(vraperH);
              $('.col3').height(vraperH);
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>

Ich hatte das gleiche Problem, es funktionierte , basierend auf Hakam Fostok Antwort, habe ich ein kleines Beispiel erstellt, in einigen Fällen kann es funktionieren könnte , ohne hinzuzufügen , display: flex;und flex-direction: column;auf dem übergeordneten Container

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

JSFiddle

Wie bereits gezeigt, ist die Flexbox am einfachsten. z.B.

#main{ display: flex; align-items:center;}

Dadurch werden alle untergeordneten Elemente an der Mitte innerhalb des übergeordneten Elements ausgerichtet.

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

Von:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

gibt Bootstrap an, aber Sie benötigen kein Bootstrap, um dies zu verwenden. Die Beantwortung dieser alten Frage, da dies für mich funktioniert hat und ziemlich einfach zu implementieren scheint.

Dies war die gleiche Antwort, die ich auf diese Frage gegeben habe

Hier Old Fashion Demo basierend auf position: absoluteContent Container und position: relativeParent Container.

Was die moderne Art betrifft, sind Flexboxen die besten.

Der einfachste Weg, dies zu tun, besteht darin, es einfach zu fälschen. A List Apart hat dies im Laufe der Jahre ausführlich behandelt, wie in diesem Artikel von Dan Cederholm aus dem Jahr 2004 .

So mache ich es normalerweise:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

Sie können diesem Design einfach einen Header hinzufügen, indem Sie #container in ein anderes div einschließen, das Header-div als Geschwister des # Containers einbetten und die Rand- und Breitenstile in den übergeordneten Container verschieben. Außerdem sollte das CSS in eine separate Datei verschoben und nicht inline usw. usw. aufbewahrt werden. Schließlich kann die Clearfix-Klasse auf positioniseverything gefunden werden .