8

Tentarei ser bem explicativo. Tenho a estrutura de um site comum como podem ver no html abaixo. E Quero que a altura da sidebar aumente conforme a altura do container ao lado. Também pode ser entendido se eu disser que preciso com que o sidebar atinja sempre a altura máxima do #wrap, que esta com height automático. Tenho o seguinte código:

<div id='wrap'>
  <div id='posts'></div>

  <div id='sidebar'>
    <div class='widget'></div>
    <div class='widget'></div>
  </div>
</div>
*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;}
#wrap{width:90%;margin:30px auto;background:#DDD;padding:20px;overflow:hidden;}
#posts{float:left;width:68%;height:2000px;background:#333;}
#sidebar{float:right;width:30%;background:#CD0000;padding:10px;}
#sidebar .widget{width:100%;height:300px;background:#111;margin:0 0 20px;}
#sidebar .widget:last-of-type{margin-bottom:0}

Link: https://jsfiddle.net/xeL80e1o/4/


Eu sei que poderia resolver isso facilmente usando o position:absolute e adicionando estes comandos css a suas respectivas classes:

#wrap{position:relative;}
#sidebar{position:absolute;right:0;height:100%}

No entanto, acontece que uma vez que o conteúdo que esta dentro do sidebar seja maior que o proprio sidebar, o conteúdo será cortado. Pois o sidebar não ultrapassa os limites do #wrap, que foi onde eu define o position:relative. Veja: https://i.stack.imgur.com/rVAXv.png

Agora que tudo já foi bem explicado, resumidamente preciso com que o sidebar acompanhe a altura do container ao lado, porém quando o conteudo que está dentro do sidebar for maior, ele redimencione normalmente como se estivesse usando o position:static, e de forma com que o #wrap não o corte. Pois bem, alguém que possa mi ajudar?

1 Resposta 1

7

Veja funcionando aqui JSFiddle.

Basicamente, você força que o display do elemento wrap seja uma tabela (table) e que as divs principais dentro dele sejam forçadas a serem semelhantes às células de uma tabela (table-cell).

#wrap {
    width: 100%;
    display: table;
}

#wrap #sidebar { 
    display: table-cell; 
    width: 25%;
    background: teal;
    min-height: 100%;
}

#wrap #posts { 
    display: table-cell; 
    width: 75%;
    background: orange;
    min-height: 100%;
}
1
  • 1
    Valeu, funcionou^^
    – Ericki
    29/01/2017 às 13:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .