¿Cómo forzar que el div hijo sea el 100% de la altura del div padre sin especificar la altura del padre?

Tengo un sitio con la siguiente estructura:

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

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

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

La navegación está a la izquierda y el contenido div está a la derecha. La información para el contenido div se extrae a través de PHP, por lo que es diferente cada vez.

¿Cómo puedo escalar la navegación verticalmente para que su altura sea la misma que la altura del div de contenido, sin importar qué página esté cargada?

NOTA : Esta respuesta es aplicable a los navegadores heredados sin soporte para el estándar Flexbox. Para un enfoque moderno, consulte: https://stackoverflow.com/a/23300532/1155721

Le sugiero que eche un vistazo a las columnas igual altura con CSS entre navegadores y sin trucos .

Básicamente, hacer esto con CSS en una forma compatible con el navegador no es trivial (sino trivial con tablas), así que encuentre una solución preempaquetada adecuada.

Además, la respuesta varía según si desea 100% de altura o igual altura. Por lo general, es igual de altura. Si es 100% de altura, la respuesta es ligeramente diferente.

Para los padres:

display: flex;

Debe agregar algunos prefijos, http://css-tricks.com/using-flexbox/ .

Editar: como señaló @Adam Garner, alinear elementos: estirar; no es necesario. Su uso también es para padres, no para niños. Si desea definir el estiramiento de los niños, use 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>

Este es un tema frustrante que se trata con los diseñadores todo el tiempo. El truco es que debes establecer la altura al 100% en BODY y HTML en tu CSS.

html,body {
    height:100%;
}

Este código aparentemente inútil es definir al navegador lo que significa 100%. Frustrante, sí, pero es la forma más sencilla.

Encuentro que configurar las dos columnas en display: table-cell;lugar de float: left;funcionar bien.

Si no le importa que el div de navegación se recorte en el caso de un div de contenido inesperadamente corto, hay al menos una manera fácil:

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

De lo contrario, está la técnica de columnas falsas .

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

Intenta hacer que el margen inferior sea del 100%.

margin-bottom: 100%;

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

Mira este ejemplo .

height : <percent>solo funcionará si tiene todos los nodos principales con un porcentaje de altura especificado con una altura fija en píxeles, ems, etc. en el nivel superior. De esa manera, la altura caerá en cascada hasta su elemento.

Puede especificar 100% a html y elementos del cuerpo como @Travis declaró anteriormente para que la altura de la página caiga en cascada a sus nodos.

Después de una larga búsqueda e intento, nada resolvió mi problema, excepto

style = "height:100%;"

en los niños div

y para los padres apliquen esto

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

Además, estoy usando bootstrap y esto no corrompió la respuesta para mí.

Según el método descrito en este artículo , he creado una solución menos dinámica:

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>

Menos:

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

Agregar display: gridal padre

Sé que ha pasado mucho tiempo desde que se hizo la pregunta, pero encontré una solución fácil y pensé que alguien podría usarla (perdón por el pobre inglés). Aquí va:

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>

Ejemplo simple. Tenga en cuenta que puede convertirse en capacidad de respuesta.

Mi solución:

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

Hay un poco de contradicción en el título de la pregunta y el contenido. El título habla de un div padre, pero la pregunta hace que parezca que desea que dos div hermanos (navegación y contenido) tengan la misma altura.

¿Desea (a) que tanto la navegación como el contenido tengan el 100% de la altura de main, o (b) desea que la navegación y el contenido tengan la misma altura?

Asumiré (b) ... si es así, no creo que pueda hacerlo dada su estructura de página actual (al menos, no con CSS puro y sin secuencias de comandos). Probablemente necesite hacer algo como:

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

y configure el div de contenido para que tenga un margen izquierdo del ancho del panel de navegación. De esa manera, el contenido del contenido está a la derecha de la navegación y puede configurar el div de navegación para que sea el 100% de la altura del contenido.

EDITAR: Estoy haciendo esto por completo en mi cabeza, pero probablemente también deba configurar el margen izquierdo del div de navegación en un valor negativo o establecer su izquierda absoluta en 0 para empujarlo hacia el extremo izquierdo. El problema es que hay muchas formas de lograrlo, pero no todas serán compatibles con todos los navegadores.

[Refiriéndose al código Less de Dmity en otra respuesta] ¿Supongo que esto es algún tipo de "pseudocódigo"?

Por lo que entiendo, intente usar la técnica de columnas falsas que debería ser la solución.

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

Espero que esto ayude :)

Este truco funciona: agregar un elemento final en su sección de HTML con un estilo claro: ambos;

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

Todo lo anterior se incluirá en la altura.

dando position: absolute;al niño trabajado en mi caso

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

Esta respuesta ya no es ideal ya que CSS flexbox y grid se implementaron en CSS. Sin embargo, sigue siendo una solución de trabajo.

En una pantalla más pequeña, es probable que desee mantener la altura automática ya que col1, col2 y col3 se apilan entre sí.

Sin embargo, después de un punto de interrupción de consulta de medios, desea que aparezcan cols uno al lado del otro con una altura igual para todas las columnas.

1125 px es solo un ejemplo del punto de ruptura del ancho de la ventana, después del cual desea que todas las columnas tengan la misma altura.

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

Podría, por supuesto, establecer más puntos de interrupción si lo necesita.

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

Tuve el mismo problema, funcionó según la respuesta de Hakam Fostok, he creado un pequeño ejemplo, en algunos casos podría funcionar sin tener que agregar display: flex;y flex-direction: column;en el contenedor principal

.row {
    margin-top: 20px;
}

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

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

JSFiddle

Como se mostró anteriormente, flexbox es el más fácil. p.ej.

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

esto alineará todos los elementos secundarios al centro dentro del elemento principal.

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

Desde:

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

indica bootstrap pero no necesita bootstrap para usar esto. Contestar esta vieja pregunta, ya que esto funcionó para mí, y parece bastante fácil de implementar.

Esta fue la misma respuesta que proporcioné a esta pregunta

Aquí una demostración antigua basada en el position: absolutecontenedor de contenido yposition: relative contenedor principal.

En cuanto a la forma moderna de hacerlo, las cajas flexibles son las mejores.

La forma más fácil de hacer esto es simularlo. A List Apart ha cubierto esto ampliamente a lo largo de los años, como en este artículo de Dan Cederholm de 2004 .

Así es como lo hago habitualmente:

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

Puede agregar fácilmente un encabezado a este diseño envolviendo #container en otro div, incrustando el encabezado div como # hermano del contenedor y moviendo los estilos de margen y ancho al contenedor principal. Además, el CSS debe moverse a un archivo separado y no mantenerse en línea, etc. etc. Finalmente, la clase clearfix se puede encontrar en positioniseverything .