Como fazer uma div flutuada a 100% da altura de seu pai?

Aqui está o HTML:

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

E aqui está o CSS:

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

Após a inspeção com as ferramentas de desenvolvedor do Chrome, a div interna está recebendo uma altura de 0px.

Como posso forçar 100% da altura da div principal?

Para que a #outeraltura se baseie em seu conteúdo e tenha como #innerbase sua altura, deixe ambos os elementos absolutamente posicionados.

Mais detalhes podem ser encontrados na especificação da propriedade css height , mas essencialmente #innerdevem ignorar a #outeraltura se #outera altura for auto, a menos que #outer esteja absolutamente posicionado. A #inneraltura será 0, a menos que #inner ela esteja posicionada 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>

No entanto ... Ao posicionar #innerabsolutamente, uma floatconfiguração será ignorada; portanto, você precisará escolher uma largura #innerexplicitamente e adicionar preenchimento #outerpara falsificar o texto que eu suspeito que você deseja. Por exemplo, abaixo, o preenchimento de #outeré a largura de #inner+3. Convenientemente (como o objetivo principal era aumentar a #inneraltura para 100%), não há necessidade de quebrar o texto abaixo #inner; portanto, isso parecerá #innerflutuar.

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

Excluí minha resposta anterior, pois ela se baseava em muitas suposições erradas sobre seu objetivo.

Para o pai:

display: flex;

Você deve adicionar alguns prefixos http://css-tricks.com/using-flexbox/

Edit: Apenas a desvantagem é o IE, como de costume, o IE9 não suporta flex. http://caniuse.com/flexbox

Editar 2: como observou o @toddsby, os itens de alinhamento são para pai e seu valor padrão é na verdade esticado . Se você deseja um valor diferente para filho, há propriedade auto-alinhada.

Edit 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

Na verdade, desde que o elemento pai esteja posicionado, você pode definir a altura da criança para 100%. Ou seja, caso você não queira que o pai esteja absolutamente posicionado. Deixe-me explicar mais:

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

Desde que você não precise oferecer suporte a versões do Internet Explorer anteriores ao IE8, você pode usar display: table-cellpara fazer isso:

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

Isso forçará cada elemento da .innerclasse a ocupar toda a altura do seu elemento pai.

Fiz um exemplo para resolver seu problema.

Você precisa criar um invólucro, flutuar, posicionar sua div absoluta e dar 100% de altura.

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

Explicação: A div .right está absolutamente posicionada. Isso significa que sua largura e altura, e as posições superior e esquerda serão calculadas com base na primeira div pai absolutamente ou em posição relativa SOMENTE se as propriedades de largura ou altura forem explicitamente declaradas em CSS; se não forem declaradas explicitamente, essas propriedades serão calculadas com base no contêiner pai (.right-wrapper).

Portanto, a altura de 100% do DIV será calculada com base na altura final do recipiente e a posição final da posição correta será calculada com base no contêiner pai.

Aqui está uma maneira mais simples de conseguir isso:

1. Defina a exibição do contêiner dos três elementos (#outer): table
2. E defina os próprios elementos (#inner) a exibição: table-cell
3. Retire o flutuante.
4. Sucesso.

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

Graças a @Itay em div flutuado , 100% de altura

Se você está preparado para usar um pouco de jQuery, a resposta é simples!

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

Isso funciona bem para flutuar um único elemento para um lado com 100% de altura do seu pai, enquanto outros elementos flutuantes que normalmente envolvem são mantidos em um lado.

Espero que isso ajude outros fãs do jQuery.

Este é um exemplo de código para o sistema de grade com altura igual.

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

Acima está o CSS para div externo

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

Acima é a div interna

Espero que isso ajude você

Isso me ajudou.

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

Mude para a direita: e para a esquerda: para definir a largura do #nerner preferível.

Um caso semelhante quando você precisa de vários elementos filhos com a mesma altura pode ser resolvido com o flexbox:

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

Definidos display: flex;para elementos pai e flex: 1;filho, todos terão a mesma altura.

experimentar

#outer{overflow: auto;}

mostre mais opções em: Como você evita que os pais de elementos flutuantes entrem em colapso?