Problema con maquetación

[lvan]

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:

Código HTML:

<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>
 

Código CSS:

#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..

[pzin]

Usa calc:

Código CSS:

#mapa {
  height: calc(100% - 200px);
}
 

Obviamente los elementos contenedores deben de tener también alguna altura definida (no vale height: auto).