quarta-feira, 6 de fevereiro de 2013

DIV que ocupa espaço remanescente da página

Queria uma página com um mapa que ocupasse a tela inteira, mas sem scroll. Isso não é difícil de fazer. Basta ter algo parecido com isto:

<body onload='i()'><div id="map" style='border:1px solid #ccc; height: 100%; hidden'></div></body>

O chato é quando quero ter um cabeçalho e aí sim a DIV ocupando o resto da página. Nesse caso o height não pode mais ser 100% pra não ter scroll.
O que fiz:

<style type='text/css'>
.row { overflow: hidden; position: absolute; border:2px solid #CCCCCC; }
.row { left: 0; right: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row { height: 75px; top: 0; }
.body.row { top: 60px; bottom: 0px; }
</style>
<body onload='i()'><div id="form" class="row header"><input type='text' name='local' value=''><input type='button' value='Buscar'></div><div id="map" class="row body"></div></body>

Aprendi isso nesta página:

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Nenhum comentário:

Postar um comentário