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
Imágen de perfil de xve

pegar un div en la parte inferior del navegador

Publicado por xve (349 intervenciones) el 26/12/2013 21:19:21
Hola Ivan, aqui tienes un ejemplo sencillo de como hacerlo:
http://www.lawebdelprogramador.com/codigo/CSS/2569-Como_poner_el_pie_de_pagina_al_final_de_pagina_con_HTML5_y_CSS.html

Coméntanos si te sirve, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar