¿Cómo hacer un div flotante 100% de altura de su padre?

Aquí está el HTML:

<div id="outer">
    <div id="inner"></div>
    Test
</div>

Y aquí está el CSS:

#inner {
  float: left;
  height: 100%;
}

Tras la inspección con las herramientas de desarrollador de Chrome, el div interno está obteniendo una altura de 0px.

¿Cómo puedo forzarlo a que sea el 100% de la altura del div principal?

Para que la #outeraltura se base en su contenido y #innerbasar su altura en eso, coloque ambos elementos en una posición absoluta.

Se pueden encontrar más detalles en la especificación de la propiedad css height , pero esencialmente, #innerdebe ignorar la #outeraltura si #outerla altura es auto, a menos que #outer esté posicionada absolutamente. Entonces la #inneraltura será 0, a menos que #inner se coloque absolutamente.

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

Sin embargo ... Al posicionarse #innerabsolutamente, floatse ignorará una configuración, por lo que deberá elegir un ancho #innerexplícitamente y agregar relleno #outerpara falsificar el ajuste de texto que sospecho que desea. Por ejemplo, a continuación, el relleno de #outeres el ancho de #inner+3. Convenientemente (ya que el objetivo principal era obtener la #inneraltura al 100%) no hay necesidad de ajustar el texto debajo #inner, por lo que se verá como #innerflotante.

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

Eliminé mi respuesta anterior, ya que se basaba en demasiadas suposiciones erróneas sobre su objetivo.

Para los padres:

display: flex;

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

Editar: el único inconveniente es IE como de costumbre, IE9 no admite flex. http://caniuse.com/flexbox

Edición 2: como señaló @toddsby, alinear elementos es para padre y su valor predeterminado es en realidad estirar . Si desea un valor diferente para el niño, existe la propiedad de alineación propia.

Edición 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

En realidad, siempre que el elemento padre esté posicionado, puede establecer la altura del niño al 100%. Es decir, en caso de que no desee que el padre esté absolutamente posicionado. Déjame explicarte más:

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>

Mientras no necesite admitir versiones de Internet Explorer anteriores a IE8, puede usar esto display: table-cellpara lograr esto:

HTML:

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

CSS:

.inner {
    display: table-cell;
}

Esto obligará a cada elemento con la .innerclase a ocupar toda la altura de su elemento padre.

Hice un ejemplo resolviendo tu problema.

Tienes que hacer un envoltorio, flotarlo, luego colocar tu div absoluto y darle una altura del 100%.

HTML

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

CSS:

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

Explicación: El .right div está absolutamente posicionado. Eso significa que su ancho y alto, y las positiones superior e izquierda se calcularán basándose en el primer div padre absoluto o en una posición relativa SOLO si las propiedades de ancho o alto se declaran explícitamente en CSS; si no se declaran explícitamente, esas propiedades se calcularán en función del contenedor principal (.right-wrapper).

Por lo tanto, el 100% de la altura del DIV se calculará en función de la altura final del contenedor, y la posición final de la posición .right se calculará en función del contenedor principal.

Aquí es una forma más simple de lograr eso:

1. Establezca la visualización del contenedor de tres elementos (#outer): tabla
2. Y establecer los elementos mismos (#inner) display: table-cell
3. Eliminar el flotante.
4. Éxito.

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

Gracias a @Itay en flotante div, 100% de altura

Si está preparado para usar un poco de jQuery, ¡la respuesta es simple!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

Esto funciona bien para flotar un solo elemento a un lado con una altura del 100% de su elemento primario, mientras que otros elementos flotantes que normalmente se envolverían se mantienen a un lado.

Espero que esto ayude a otros fanáticos de jQuery.

Este es un ejemplo de código para un sistema de cuadrícula con igual altura.

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

Arriba está el CSS para div externo

#inner{
width: 20%;
float: left;
border: 1px solid;
}

Arriba está el div interno

Espero que esto te ayude

Esto me ayudo.

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

Cambie a la derecha: y a la izquierda: para configurar el # ancho interior preferible

Un caso similar cuando necesita varios elementos secundarios que tienen la misma altura se puede resolver con flexbox:

https://css-tricks.com/using-flexbox/

Establecidos display: flex;para elementos primarios y flex: 1;secundarios, todos tendrán la misma altura.

tratar

#outer{overflow: auto;}

mostrar más opciones en: ¿Cómo evita que los padres de elementos flotantes colapsen?