CSS - Expandir altura DIV filho flutuante para a altura dos pais

Eu tenho a estrutura da página como:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

Agora, o child-leftDIV terá mais conteúdo, portanto a parentaltura do DIV aumenta conforme o DIV filho.

Mas o problema é que a child-rightaltura não está aumentando. Como posso fazer sua altura igual à sua mãe?

Para o parentelemento, adicione as seguintes propriedades:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

então para .child-rightestes:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Encontre resultados mais detalhados com exemplos de CSS aqui e mais informações sobre colunas de altura igual aqui .

Uma solução comum para esse problema usa posicionamento absoluto ou flutuadores cortados, mas estes são complicados, pois exigem um ajuste extensivo se as colunas mudarem de número + tamanho e você precisa garantir que a coluna "principal" seja sempre a mais longa. Em vez disso, sugiro que você use uma das três soluções mais robustas:

1. display: flex: de longe a solução mais simples e melhor e muito flexível - mas não suportada pelo IE9 e versões anteriores.
2. tableou display: table: muito simples, muito compatível (praticamente todos os navegadores de todos os tempos), bastante flexível.
3. display: inline-block; width:50% com um corte de margem negativo: bastante simples, mas as bordas na parte inferior da coluna são um pouco complicadas.

1 display:flex

Isso é realmente simples e fácil de se adaptar a layouts mais complexos ou mais detalhados - mas o flexbox é suportado apenas pelo IE10 ou posterior (além de outros navegadores modernos).

Exemplo: http://output.jsbin.com/hetunujuma/1

Html relevante:

<div class="parent"><div>column 1</div><div>column 2</div></div>

CSS relevante:

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

O Flexbox oferece suporte para muito mais opções, mas para ter simplesmente qualquer número de colunas, as opções acima são suficientes!

2. <table>oudisplay: table

Uma maneira simples e extremamente compatível de fazer isso é usar um table- eu recomendo que você tente primeiro se precisar de suporte do IE antigo . Você está lidando com colunas; divs + floats simplesmente não são a melhor maneira de fazer isso (sem mencionar o fato de que vários níveis de divs aninhados apenas para contornar as limitações de css são dificilmente mais "semânticos" do que apenas usar uma tabela simples). Se você não deseja usar o tableelemento, considere cssdisplay: table (não suportado pelo IE7 e mais antigo).

Exemplo: http://jsfiddle.net/emn13/7FFp3/

HTML relevante: (mas considere usar um simples<table>)

<div class="parent"><div>column 1</div><div>column 2</div></div>

CSS relevante:

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

Essa abordagem é muito mais robusta do que usar overflow:hiddencom flutuadores. Você pode adicionar praticamente qualquer número de colunas; você pode dimensioná- los automaticamente, se quiser; e você mantém a compatibilidade com navegadores antigos. Diferentemente da solução flutuante requer, você também não precisa saber de antemão qual coluna é mais longa; a altura escala muito bem.

BEIJO: não use hacks flutuantes, a menos que você precise especificamente. Se o IE7 for um problema, eu ainda escolheria uma tabela simples com colunas semânticas em vez de uma solução CSS de truque difícil de manter e menos flexível a qualquer dia.

A propósito, se você precisar que seu layout seja responsivo (por exemplo, sem colunas em telefones celulares pequenos), poderá usar uma @mediaconsulta para retornar ao layout de bloco simples para pequenas larguras de tela - isso funciona se você usa <table>ou qualquer outro display: tableelemento.

3. display:inline blockcom uma margem negativa hack.

Outra alternativa é usar display:inline block.

Exemplo: http://jsbin.com/ovuqes/2/edit

HTML relevante: (a ausência de espaços entre asdivtags é significativa!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

CSS relevante:

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

Isso é um pouco complicado, e a margem negativa significa que a parte inferior "verdadeira" das colunas está obscurecida. Por sua vez, isso significa que você não pode posicionar nada em relação à parte inferior dessas colunas, porque isso é cortado overflow: hidden. Observe que, além dos blocos embutidos, você pode obter um efeito semelhante com os flutuadores.

TL; DR : use flexbox se você puder ignorar o IE9 e mais antigo; caso contrário, tente uma tabela (css). Se nenhuma dessas opções funcionar para você, há invasões de margem negativa, mas elas podem causar problemas estranhos de exibição que são fáceis de serem perdidos durante o desenvolvimento e existem limitações de layout que você precisa conhecer.

Para o pai:

display: flex;

Para crianças:

align-items: stretch;

Você deve adicionar alguns prefixos, verifique caniuse.

Encontrei muitas respostas, mas provavelmente a melhor solução para mim é

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

Você pode verificar outras soluções aqui http://css-tricks.com/fluid-width-equal-height-columns/

Por favor, defina div pai como overflow: hidden
divs filho. Você pode definir uma grande quantia para o fundo do preenchimento. por exemplo,
padding-bottom: 5000px
então margin-bottom: -5000px
e então todos os divs filhos terão a altura do pai.
Claro que isso não funcionará se você estiver tentando colocar conteúdo na div pai (fora de outras divs)

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}

<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

Exemplo: http://jsfiddle.net/Tareqdhk/DAFEC/

Os pais têm altura? Se você definir a altura dos pais dessa forma.

div.parent { height: 300px };

Então você pode fazer a criança esticar até a altura máxima dessa maneira.

div.child-right { height: 100% };

EDITAR

Aqui está como você faria isso usando JavaScript.

A exibição da tabela CSS é ideal para isso:

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Resposta original (supondo que qualquer coluna possa ser mais alta):

Você está tentando tornar a altura dos pais dependente da altura dos filhos e a altura dos filhos depende da altura dos pais. Não computará. As colunas CSS Faux são a melhor solução. Há mais de uma maneira de fazer isso. Prefiro não usar JavaScript.

Recentemente, fiz isso no meu site usando jQuery. O código calcula a altura da div mais alta e define as outras divs para a mesma altura. Aqui está a técnica:

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

Não acredito height:100%que funcione, portanto, se você não conhece explicitamente as alturas de div, não acho que exista uma solução CSS pura.

Eu usei isso para uma seção de comentários:

.parent {
    display: flex;
    float: left;
    border-top:2px solid black;
    width:635px;
    margin:10px 0px 0px 0px;
    padding:0px 20px 0px 20px;
    background-color: rgba(255,255,255,0.5);
}
    
.child-left {
	align-items: stretch;
	float: left;
	width:135px;
	padding:10px 10px 10px 0px;
	height:inherit;
	border-right:2px solid black;
}

.child-right {
	align-items: stretch;
	float: left;
	width:468px;
	padding:10px;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Você pode flutuar a criança-direita para a direita, mas, neste caso, calculei as larguras de cada div com precisão.

Se você está ciente do bootstrap, é possível fazê-lo facilmente usando a propriedade 'flex'. Tudo o que você precisa fazer é passar abaixo das propriedades css para parent div

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

Onde .homepageSectionestá o meu pai div? Agora adicione div filho no seu html como

<div class="abc col-md-6">
<div class="abc col-md-6">

onde abc é meu filho div. Você pode verificar a igualdade de altura em ambos filho div, independentemente da borda, apenas atribuindo borda ao filho div

<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

Eu usei o estilo embutido apenas para dar uma idéia.

Eu aprendi desse truque em uma entrevista de estágio. A pergunta original é como garantir que a altura de cada componente superior em três colunas tenha a mesma altura que mostra todo o conteúdo disponível. Basicamente, crie um componente filho invisível que renderize a altura máxima possível.

<div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </div>
</div>