Hola C2am, la parte roja no es un DIV es la ventana (el viewport).
Y lo del min-height no funciona, porque digamos que tenemos algo como:
Código CSS:
Ver original#header{
height: 100px;
}
#contenedor{
min-height: 100%;
}
entonces esto nos da la situacion de la imagen (donde el div azul = contenedor se sale de la ventana).
Para que no se salga podriamos hacer algo como:
Código CSS:
Ver original#contenedor{
min-height: 100%;
margin-top: -100px;
}
o tambien un position:relative; y top: -100px;
Pero entonces el contenido del div azul se superpondria con el del rojo.
Entonces podriamos agregarle un
padding-top: 100px;
pero entonces de nuevo el div azul se sale de la ventana.
Entonces podriamos en vez de agregarle el padding al contenedor agregarselo al contenido:
Código CSS:
Ver original#header{
height: 100px;
}
#contenedor{
min-height: 100%;
margin-top: -100px;
}
#contenido {
magin-top: 100px;
}
Y esto creo que funcionaria para las situaciones 1 y 2, pero no para la 3 (donde el contenido tiene que ocupar todo el resto, pero solo el resto) porque si tenemos:
#contenido {
magin-top: 100px;
height: 100%;
}
height:100% pasa a ser de nuevo demasiado y tenemos de nuevo la situacion de la imagen.
(De hecho creo que esto ni me habia funcionado, necesita si o si un height en el contenedor, el min-height no le sirve como referencia).
Para solucionar eso podriamos de nuevo agregar un height:100% al contenedor y ademas un overflow:hidden;
Pero no solo que estaríamos ocultando al contenido (no dimensionandolo acordemente) sino que esto haria que deje de funcionar el min-height (o sea ya no se expanda el contenedor si es necesario).
En fin, la pregunta es mas general por eso no hay un CSS especifico, o sea, la idea es crear justamente el CSS que logra hacer los 3 puntos que explique en mi post anterior (y que basicamente se resumen a poder dimensionar un DIV para que ocupe solo el viewport restante).