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

256

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?

Nathan Osman
fonte
1
Então você quer que o texto na div externa (não na div interna), mas a div interna flutuante seja a altura da div externa?
EDL
Qual é o resultado final que você está tentando alcançar? Acho que minha confusão está no fato de que, se a div interna é tão alta quanto a externa e a externa é tão alta quanto o texto, não é o mesmo que ter o texto na div interna?
EDL
2
@edl: Sim, é :) A razão pela qual eu quero assim é que a div interna tem uma imagem como plano de fundo. O texto precisa estar ao lado dele. Ambos precisam estar dentro da div externa, pois também possui uma imagem de fundo.
Nathan Osman
3
Veja também stackoverflow.com/questions/1122381
Chadwick
2
Ver e tentar as respostas para essa pergunta foi simplesmente deprimente.
EternalHour

Respostas:

125

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.

Chadwick
fonte
118
Hmm ... a pergunta era sobre divs flutuantes. Você respondeu sobre absolutamente posição divs
Mihkel L.
57
Eu nunca parar de surpreender o quão complexo é conseguir coisas insanamente simples em HTML/CSS:)
Yuriy Nakonechnyy
15
Alguma maneira de fazer isso sem larguras codificadas? Não é ótimo para contêineres responsivos.
Jake Wilson
23
Não sei por que isso foi aceito e votado tanto. A pergunta é sobre divs flutuantes, que foi o que me trouxe aqui da minha pesquisa e, em vez disso, isso responde a divs absolutamente posicionados.
Matt K
2
Como fazer com que um contêiner flutuado se encaixe verticalmente? Por não fazê-lo flutuar mais! Haha Boa tentativa e perto o suficiente para ser considerado útil, na verdade.
Rolf
124

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/

Aiphee
fonte
3
Você deve salientar que isso funciona apenas em navegadores modernos e, mesmo assim, requer prefixos de fornecedores.
kontur
12
Estou surpreso que essa solução não tenha recebido mais atenção, já que a pergunta original exige que o div div seja flutuado e toda a posição: soluções absolutas realmente jogam uma chave inglesa nos trabalhos na maioria das situações em que você usaria float. Esta solução fornece uma ótima solução onde os efeitos colaterais da posição: absoluto não são um problema e se você estiver disposto a ir um pouco mais longe, é possível obter uma boa compatibilidade entre navegadores.
Luke
Esta é a resposta aqui. O IE9 sairá em breve, e pode ajudar, dando um chute sólido e bom. Esta solução é tão agradável, simples e fácil ... Acabei de hackear soluções alternativas. ;)
jrista
2
De acordo com as especificações mais recentes do Flexbox : consulte w3.org/TR/css-flexbox-1/#align-items-property . align-items: stretch;não é necessário, pois é o valor padrão. Também deve ser definido no pai e não no filho.
toddsby
1
Adicionado violino em resposta. @Tigran
Aiphee
77

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>
Nathaniel Schweinberg
fonte
14
Cool, isso é menos limitante do que a exigência de Chadwick de position:absolute(o que poderia interferir com estilos de um site)
henry
3
Pode ser apenas eu, mas tenho problemas se a barra lateral for maior que o conteúdo. Uma cor de plano de fundo será interrompida no contêiner pai, mas o conteúdo da barra lateral será excedido fora do pai.
Howdy_McGee
Essa é uma solução muito mais flexível e, mesmo que você tenha vários elementos filhos flutuantes, parece uma desvantagem aceitável estilizar seu deslocamento absolutamente posicionado. +1
respondeu
Obrigado muito muito. Publiquei minha solução específica como resposta a outra pergunta no SO: stackoverflow.com/a/31749164/84661 .
Brian Haak
24

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.

Nathan Osman
fonte
Embora isso funcione, não mostrará uma margem, mesmo se você especificar uma. Portanto, esta solução falhará se você desejar atribuir uma margem. Você pode atribuir o preenchimento como uma solução alternativa, mas como você o resolveria se precisasse de uma margem (e não do preenchimento)?
Devner
13
Estou faltando alguma coisa aqui? Sua pergunta pede que um elemento flutuante tenha altura 100%. Quando flutuado, um display: table-cell;elemento não preenche mais a altura de seu contêiner? Devo estar faltando alguma coisa, porque é sua própria pergunta ...?
usar o seguinte comando
16

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.

Mandarinazul
fonte
1
Essa é uma solução sólida para situações nas quais você pode garantir que o .rightconteúdo da coluna seja mais curto que o .leftconteúdo da coluna. Por exemplo, se você estiver usando isso em um componente no qual a .leftcoluna possui algum conteúdo de tamanho variável e a coluna da direita simplesmente exibir uma seta para uma página de detalhes, essa solução funcionará bem. +1 para isso
Zachary Kniebel
15

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

leopinzon
fonte
8

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.

Obi-Dan
fonte
18
Parece um exagero lançar javascript nesse problema de layout.
kontur
1
Como alguém que está tendo que se desenvolver no IE: OBRIGADO!
Rook
1
Um pouco exagerado, talvez, mas esta é uma bela resposta, obrigado!
Martin
1
Concordo que todos os problemas de posicionamento devem ser resolvidos sem o JS.
22615 michaeluskov
1
É um exagero usar JS E jQuery
ViliusL
3

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ê

Biswajit
fonte
1

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.

sevenkey
fonte
1

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.

romaroma
fonte
-1

experimentar

#outer{overflow: auto;}

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

Rodrigo Barreiro
fonte
o "overflow: hidden" opção parece funcionar melhor, porque não há nenhuma chance de rolar ...
Rodrigo Barreiro
Se você encontrou uma solução melhor, pode editar sua resposta. Além disso, seria bom se você adicionasse mais informações à sua resposta, como por exemplo as informações fornecidas no link.
Donald Duck