Como forçar div filho a ser 100% da altura do div pai sem especificar a altura do pai?

Eu tenho um site com a seguinte estrutura:

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

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

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

A navegação está à esquerda e a divisão de conteúdo está à direita. As informações para a div de conteúdo são extraídas através do PHP, por isso são sempre diferentes.

Como posso dimensionar a navegação verticalmente para que sua altura seja igual à altura da div do conteúdo, independentemente da página carregada?

NOTA : Esta resposta é aplicável a navegadores herdados sem suporte para o padrão Flexbox. Para uma abordagem moderna, consulte: https://stackoverflow.com/a/23300532/1155721

Sugiro que você dê uma olhada nas colunas de altura igual com CSS no navegador cruzado e sem hack .

Basicamente, fazer isso com CSS de maneira compatível com o navegador não é trivial (mas trivial com tabelas); portanto, encontre uma solução pré-empacotada apropriada.

Além disso, a resposta varia se você deseja 100% de altura ou altura igual. Geralmente é igual altura. Se tiver 100% de altura, a resposta é um pouco diferente.

Para o pai:

display: flex;

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

Edit: Como observou @Adam Garner, align-items: stretch; Não é necessário. Seu uso também é para pais, não para filhos. Se você deseja definir o alongamento das crianças, use o self de alinhamento.

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

Esse é um problema frustrante que é tratado com designers o tempo todo. O truque é que você precisa definir a altura para 100% em BODY e HTML em seu CSS.

html,body {
    height:100%;
}

Esse código aparentemente sem sentido é definir para o navegador o que significa 100%. Frustrante, sim, mas é a maneira mais simples.

Acho que definir as duas colunas em display: table-cell;vez de float: left;funciona bem.

Se você não se importa com o div de navegação sendo cortado no caso de um div de conteúdo inesperadamente curto, há pelo menos uma maneira 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 */
}

Caso contrário, há a técnica de colunas 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();
});

Tente fazer a margem inferior 100%.

margin-bottom: 100%;

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

Veja este exemplo .

height : <percent>funcionará apenas se você tiver todos os nós principais com uma porcentagem de altura especificada e uma altura fixa em pixels, ems etc. no nível superior. Dessa forma, a altura cairá em cascata até o seu elemento.

Você pode especificar 100% para html e elementos do corpo, como o @Travis afirmou anteriormente, para que a altura da página desça em cascata nos seus nós.

Após longa pesquisa e tentativa, nada resolveu meu problema, exceto

style = "height:100%;"

nas crianças div

e para pai aplicar isso

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

Além disso, estou usando o bootstrap e isso não corrompeu o responsivo para mim.

Com base no método descrito neste artigo , criei a. Menos solução 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;
            }
        }
    }
}

Adicionar display: gridao pai

Eu sei que já faz muito tempo desde que a pergunta foi feita, mas achei uma solução fácil e achei que alguém poderia usá-la (desculpe pelo inglês ruim). Aqui vai:

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>

Exemplo simples. Observe que você pode se transformar em capacidade de resposta.

Minha solução:

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

Existe um pouco de contradição no título e no conteúdo da pergunta. O título fala de uma div pai, mas a pergunta faz parecer que você deseja que duas divs irmãos (navegação e conteúdo) tenham a mesma altura.

Você (a) deseja que a navegação e o conteúdo tenham 100% da altura do principal ou (b) deseja que a navegação e o conteúdo tenham a mesma altura?

Eu assumo (b) ... se é assim, acho que você não será capaz de fazê-lo, dada sua estrutura de página atual (pelo menos, não com CSS puro e sem scripts). Você provavelmente precisaria fazer algo como:

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

e defina a div de conteúdo para ter uma margem esquerda, independentemente da largura do painel de navegação. Dessa forma, o conteúdo do conteúdo fica à direita da navegação e você pode definir a div de navegação como 100% da altura do conteúdo.

EDIT: Estou fazendo isso completamente na minha cabeça, mas você provavelmente também precisará definir a margem esquerda da div de navegação para um valor negativo ou definir sua esquerda absoluta para 0 para empurrá-la de volta para a extrema esquerda. O problema é que existem muitas maneiras de fazer isso, mas nem todas serão compatíveis com todos os navegadores.

[Referindo-se ao código Menos de Dmity em outra resposta] Estou supondo que isso seja algum tipo de "pseudo-código"?

Pelo que entendi, tente usar a técnica de colunas falsas que deve resolver o problema.

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

Espero que isto ajude :)

Este truque funciona: Adicionando um elemento final em sua seção de HTML com um estilo de clear: both;

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

Tudo antes disso será incluído na altura.

dando position: absolute;para a criança trabalhou no meu caso

Você usa 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>

Essa resposta não é mais ideal, já que a CSS flexbox e grade foram implementadas no CSS. No entanto, ainda é uma solução funcional

Em uma tela menor, você provavelmente desejaria manter a altura automática, pois as colunas col1, col2 e col3 são empilhadas uma sobre a outra.

No entanto, após um ponto de interrupção da consulta à mídia, você deseja que as colunas apareçam próximas uma da outra com uma altura igual para todas as colunas.

1125 px é apenas um exemplo de ponto de interrupção da largura da janela, após o qual você deseja definir todas as colunas com a mesma 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>

Obviamente, você poderia definir mais pontos de interrupção, se necessário.

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

Eu tive o mesmo problema, funcionou com base na resposta de Hakam Fostok, criei um pequeno exemplo; em alguns casos, ele pode funcionar sem precisar adicionar display: flex;e flex-direction: column;no contêiner pai

.row {
    margin-top: 20px;
}

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

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

JSFiddle

Como mostrado anteriormente, o flexbox é o mais fácil. por exemplo.

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

isso alinhará todos os elementos filhos ao centro dentro do elemento pai.

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

De:

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

afirma o bootstrap, mas você não precisa do bootstrap para usá-lo. Responder a essa pergunta antiga, pois funcionou para mim, e parece bastante fácil de implementar.

Esta foi a mesma resposta que forneci a esta pergunta

Aqui, uma demonstração de moda antiga baseada no position: absolutecontêiner de conteúdo e position: relativeno contêiner pai.

Quanto à maneira moderna de fazer isso - as caixas flex são as melhores.

A maneira mais fácil de fazer isso é fingir. A List Apart cobriu isso extensivamente ao longo dos anos, como neste artigo de Dan Cederholm de 2004 .

Aqui está como eu costumo fazer isso:

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

É possível adicionar facilmente um cabeçalho a esse design, envolvendo #container em outra div, incorporando a div do cabeçalho como # irmão do contêiner e movendo os estilos de margem e largura para o contêiner pai. Além disso, o CSS deve ser movido para um arquivo separado e não mantido em linha etc. etc. Finalmente, a classe clearfix pode ser encontrada em positioniseverthing .