Height 100% com CSS e/ou JQUERY

Pessoal, vou dar duas dicas simples envolvendo a propriedade height de qualquer div, uma dica de CSS e outra de JavaScript, sabemos que por default quando definimos simplesmente o style de uma div como “width: 100%; height: 100%” apenas o width obedece à definição, o height não.

Dica 1 (CSS): Para que o height passe a obedecer a condição passada, antes faça a seguinte definição em sua folha de estilos:

html, body {
height: 100%;
}

Mas claro, nem sempre isso resolve, quando por exemplo você que definir que uma div ocupe toda a tela (width e height em 100%), porém existe uma div do lado, abaixo ou acima que também precisa ser mostrada, e agora? É aí que entra o nosso querido Jquery, ele irá calcular, depois do HTML ter sido gerado o tamanho da tela do usuário e redefinir os tamanhos para as divs em questão. Esta é a segunda dica:

Dica 2 (JQUERY): Neste exemplo tenho uma div que precisa preencher a tela toda, mas que tem de ficar a 40px da margem superior, então no CSS defini o “margin-top: 40px;” e o script abaixo fará o resto depois da página ter sido carregada.

<script>
$(document).ready(function() {
    var Height = $(document).height()-40;
    $('#base_conteudo').css({'height':Height});
});
</script>

Bem, o Felipe Elia diz ter tido problemas com navegadores diferentes, eu não tive, mas se você também estiver tendo problemas depois destas dicas, a dica do Felipe Elia pode ser valiosa.

Abraços!