Obrigado, resolvi o meu com a sua ajuda, aprimorando-o um pouco, pois quero uma div 100% largura 100% de altura (menos altura de uma barra inferior) e nenhuma rolagem no corpo (sem hack / ocultar barras de rolagem).
Para CSS:
html{
width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
body{
position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
div.adjusted{
position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
}
div.the_bottom_bar{
width:100%;height:31px;margin:0px;border:0px;padding:0px;
}
Para HTML:
<body>
<div class="adjusted">
// My elements that go on dynamic size area
<div class="the_bottom_bar">
// My elements that goes on bottom bar (fixed heigh of 31 pixels)
</div>
</div>
Isso fez o truque, oh sim, eu coloquei um valor um pouco melhor em div.ajustado para a parte inferior do que para a altura da barra inferior, caso contrário a barra de rolagem vertical aparece, eu ajustei para ser o valor mais próximo.
Essa diferença é porque um dos elementos na área dinâmica está adicionando um orifício extra extra do qual eu não sei como me livrar ... é uma tag de vídeo (HTML5), observe que coloquei essa tag de vídeo com este css ( então não há razão para fazer um furo no fundo, mas sim):
video{
width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
O objetivo: ter um vídeo que use 100% do navegador (e redimensione dinamicamente quando o navegador é redimensionado, mas sem alterar a proporção) menos um espaço inferior que eu uso para uma div com alguns textos, botões, etc. (e validadores w3c & css, é claro).
EDIT: eu encontrei o motivo, tag de vídeo é como texto, não um elemento de bloco, então eu corrigi-lo com este css:
video{
display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
Observe a display:block;
tag no vídeo.