CSS - pegar un div en la parte inferior del navegador

 
Vista:
Imágen de perfil de lvan

pegar un div en la parte inferior del navegador

Publicado por lvan (1 intervención) el 26/12/2013 11:30:39
hola, bueno soy nuevo con css y he estado desarrollando una pagina con 2 divs:

El primero el div con id="panel-inferior" que va pegado a la parte inferior del navegador y que tiene una altura fija de 200px.

El segundo el div con id="mapa" el que debe ocupar el espacio restante, es aqui donde tengo el problema he intentado muchas cosas pero no puedo lograr que el div mapa se adapte automaticamente al tamaño restante.
Alguien puede indicarme como hacer esto, que estilos le debo aplicar a mapa?

adyunto el codigo que utilizo:

HTML:
1
2
3
4
5
6
7
8
9
<div id="mapa">
        div mapa
</div>
 
<div id="panel-inferior">
        <label for="origen"><span class="titulo">origen:</span>
        </label> <input  type="text" id="origen" />
        <input type="submit" id="btnBuscar" value="buscar " >
</div>
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#panel-inferior{
 
    width:100%;
    height:200px;
    position:fixed;
    bottom:0px;
    z-index:10;
 
}
 
#mapa{
    width:100%;
    height:100%;
    margin-top:-200px;
}
saludos y gracias de antemano..
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder