Publicado em 24 de jun.

Menu com height 100%

Olá pessoal, seguinte, tenho um problema que me assombra há tempos: height 100% !!!

Estou fazendo um sistema de gerenciamento pros projetos futuros que eu for desenvolver, algo como uma base, pra facilitar minha vida. Não gosto muito de usar layouts prontos (até usaria, mas a maioria dos bootstraps bonitos são pagos), enfim, gostaria de montar um layout com esta estrutura:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/BVblnP3.png&key=1894ff9c3eef72ad6b4aacdcf059bb546a093c14305fd4a49ca476f6b6e07cca" alt="BVblnP3.png" />

mas acontece que, quando o div de conteúdo ultrapassa o tamanho da tela (cria a barra de scroll no browser), o menu não acompanha ele, ou seja, o height do menu "trava" no height da tela, uma gambiarra que eu fiz foi:

$('div.menu').height($(window).height());

porém, se a div cresce dinamicamente, ou algum conteúdo entra depois do load, a o menú não acompanha também, e outra, eu não queria fazer com jquery, queria solucionar com CSS. alguém poderia me ajudar ? grato.

PS: Já utilizei o body, html { height:100%; }, sem sucesso.

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

André do Vale· 25 de jun.

O correto seria a utilização de flex box.

Mas para o desejado dá também para fazer com o que você já tinha tentado. Mais ou menos assim:

html, body {

 height:100%;
}
.container {
 min-height: 100%;
}
.menu {
 min-height: calc(100% - 10em); /* altere 10em para a altura de seu topo */
}

Lucas Santos Brito· 25 de jun.

Minha sugestão é que fixe o menu ao rolar a página, desta forma:

$(function(){
	var nav=$('#seu_menu');
 var top= 45;
	$(window).scroll(function(){
 if($(this).scrollTop()>top){
 nav.addClass('menu-fixo');
 }
 else {
 nav.removeClass('menu-fixo');
 }
	})
})

Quando o scroll rolar 45px (variável 'top'), o menu receberá a classe para fixa-lo (A classe fica a seu critério). Defina conforme a sua necessidade.

Mateus Silva· 25 de jun.

@Andre Campos

Mesma coisa que aconteceu antes, olha só:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/hiKDGEl.png&key=49ba359cdad8ecfe74684b05112e6db2b45bfc523b0dadb255634b24fbfc38a9" alt="hiKDGEl.png" />

Ele fica 100%, mas quando o container cresce a ponto de gerar um scroll na página, ele não companha, código ta assim:

 margin:0;
 padding:0;
}

html, body {

 height:100%;
}
.top {
 width:100%;
 background:tomato;
 height:50px;
}
.container {
 min-height:50px;
 background:purple;
 width:auto;
 margin-left:220px;
 margin-right:20px;
 margin-top:20px;
}
.menu {
 min-height: calc(100% - 50px); /* altere 10em para a altura de seu topo */
 width:200px;
 background:blue;
 float:left;
}

reebr· 25 de jun.

Tipo isso?

http://jsfiddle.net/5o90nzk1/

André do Vale· 26 de jun.

Dei um fork na solução do re22 para o problema da div de conteúdo crescer mais que o necessário: http://jsfiddle.net/85aLo1z6/

Entretanto, para isto, terás de usar faux-column caso tenha um fundo linear e específico, e também declarar altura minima pro conteúdo, o que faz com crie um ciclo vicioso com o problema de altura.

Insisto no flexbox: http://learnlayout.com/flexbox.html