Come forzare il div del bambino a raggiungere il 100% dell'altezza del div del genitore senza specificare l'altezza del genitore?

Ho un sito con la seguente struttura:

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

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

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

La navigazione è a sinistra e il div contenuto è a destra. Le informazioni per il div del contenuto vengono raccolte tramite PHP, quindi ogni volta sono diverse.

Come posso ridimensionare verticalmente la navigazione in modo che la sua altezza sia uguale all'altezza del div del contenuto, indipendentemente dalla pagina caricata?

NOTA : questa risposta è applicabile ai browser legacy senza supporto per lo standard Flexbox. Per un approccio moderno, consultare: https://stackoverflow.com/a/23300532/1155721

Ti suggerisco di dare un'occhiata alle colonne di uguale altezza con CSS cross-browser e senza hack .

Fondamentalmente, farlo con CSS in un modo compatibile con il browser non è banale (ma banale con le tabelle), quindi trova te stesso una soluzione preconfezionata appropriata.

Inoltre, la risposta varia a seconda che tu voglia il 100% di altezza o uguale altezza. Di solito è uguale altezza. Se è al 100% di altezza, la risposta è leggermente diversa.

Per il genitore:

display: flex;

È necessario aggiungere alcuni prefissi, http://css-tricks.com/using-flexbox/ .

Modifica: come notato da @Adam Garner, align-items: stretch; non è necessario. Il suo utilizzo è anche per i genitori, non per i bambini. Se vuoi definire l'allungamento dei bambini, usi 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>

Questo è un problema frustrante che viene sempre affrontato dai designer. Il trucco è che devi impostare l'altezza al 100% su BODY e HTML nel tuo CSS.

html,body {
    height:100%;
}

Questo codice apparentemente inutile è definire per il browser cosa significa 100%. Frustrante, sì, ma è il modo più semplice.

Trovo che l'impostazione delle due colonne su display: table-cell;invece di float: left;funzioni bene.

Se non ti dispiace che il div di navigazione venga troncato in caso di un div contenuto inaspettatamente breve, c'è almeno un modo semplice:

#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 */
}

Altrimenti c'è la tecnica delle colonne finte .

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

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

Prova a rendere il margine inferiore al 100%.

margin-bottom: 100%;

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

Guarda questo esempio .

height : <percent>funzionerà solo se hai tutti i nodi padre con altezza percentuale specificata con un'altezza fissa in pixel, ems, ecc. al livello superiore. In questo modo, l'altezza scenderà a cascata verso il tuo elemento.

Puoi specificare il 100% in html ed elementi del corpo come precedentemente indicato da @Travis per avere l'altezza della pagina che scende a cascata verso i tuoi nodi.

Dopo lunghe ricerche e tentativi, nulla ha risolto il mio problema tranne

style = "height:100%;"

sui bambini div

e per i genitori applicare questo

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

inoltre, sto usando bootstrap e questo non ha corrotto il responsive per me.

Sulla base del metodo descritto in questo articolo ho creato. Soluzione meno dinamica:

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>

Di meno:

/* 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;
            }
        }
    }
}

Aggiungi display: gridal genitore

So che è passato un po 'di tempo da quando è stata fatta la domanda, ma ho trovato una soluzione semplice e ho pensato che qualcuno potesse usarla (mi dispiace per il povero inglese). Eccolo:

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>

Semplice esempio. Nota che puoi trasformarti in reattività.

La mia soluzione:

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

C'è un po 'di contraddizione nel titolo della domanda e nel contenuto. Il titolo parla di un div genitore, ma la domanda fa sembrare che tu voglia che due div fratelli (navigazione e contenuto) abbiano la stessa altezza.

(A) vuoi che sia la navigazione che i contenuti siano al 100% dell'altezza di main, o (b) vuoi che la navigazione e i contenuti siano alla stessa altezza?

Presumo (b) ... se è così, non penso che sarai in grado di farlo data la tua struttura di pagina corrente (almeno, non con CSS puro e senza script). Probabilmente dovresti fare qualcosa del tipo:

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

e imposta il div del contenuto in modo che abbia un margine sinistro di qualunque sia la larghezza del riquadro di navigazione. In questo modo, il contenuto del contenuto è a destra della navigazione e puoi impostare il div di navigazione al 100% dell'altezza del contenuto.

EDIT: Lo sto facendo completamente nella mia testa, ma probabilmente avresti anche bisogno di impostare il margine sinistro del div di navigazione su un valore negativo o impostare il suo assoluto a sinistra per riportarlo all'estrema sinistra. Il problema è che ci sono molti modi per farlo, ma non tutti saranno compatibili con tutti i browser.

[Riferendosi al codice Less di Dmity in un'altra risposta] Immagino che questo sia una specie di "pseudo-codice"?

Da quello che ho capito prova a usare la tecnica delle colonne finte che dovrebbe fare il trucco.

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

Spero che sia di aiuto :)

Questo trucco funziona: aggiungere un elemento finale nella tua sezione di HTML con uno stile di clear: both;

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

Tutto prima sarà incluso in altezza.

dare position: absolute;al bambino ha lavorato nel mio caso

Si utilizza 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>

Questa risposta non è più ideale poiché la flexbox e la griglia CSS sono state implementate per i CSS. Tuttavia è ancora una soluzione funzionante

Su uno schermo più piccolo probabilmente vorresti mantenere l'altezza automatica poiché col1, col2 e col3 sono impilati l'uno sull'altro.

Tuttavia, dopo un punto di interruzione della query multimediale, i cols dovrebbero apparire uno accanto all'altro con un'altezza uguale per tutte le colonne.

1125 px è solo un esempio di breakpoint di larghezza della finestra dopo il quale si desidera impostare tutte le colonne sulla stessa altezza.

<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>

Naturalmente, se necessario, è possibile impostare più punti di interruzione.

<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>

Ho avuto lo stesso problema, ha funzionato in base alla risposta di Hakam Fostok, ho creato un piccolo esempio, in alcuni casi potrebbe funzionare senza dover aggiungere display: flex;e flex-direction: column;sul contenitore padre

.row {
    margin-top: 20px;
}

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

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

JSFiddle

Come mostrato in precedenza, flexbox è il più semplice. per esempio.

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

questo allineerà tutti gli elementi figlio al centro all'interno dell'elemento genitore.

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

A partire dal:

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

indica bootstrap ma non è necessario bootstrap per utilizzare questo. Rispondere a questa vecchia domanda, poiché ha funzionato per me e sembra abbastanza facile da implementare.

Questa era la stessa risposta che ho fornito a questa domanda

Ecco una vecchia demo di moda basata sul position: absolutecontenitore del contenuto e position: relativesul contenitore principale.

Per quanto riguarda il modo moderno di farlo, le scatole flessibili sono le migliori.

Il modo più semplice per farlo è semplicemente fingere. A List Apart lo ha ampiamente trattato nel corso degli anni, come in questo articolo di Dan Cederholm del 2004 .

Ecco come lo faccio di solito:

<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>

Puoi facilmente aggiungere un'intestazione a questo disegno avvolgendo #container in un altro div, incorporando il div dell'intestazione come fratello di # container e spostando gli stili di margine e larghezza nel contenitore padre. Inoltre, il CSS dovrebbe essere spostato in un file separato e non tenuto in linea, ecc. Ecc. Infine, la classe clearfix può essere trovata su positioniseverything .