Ajustar al 100% de altura un div

[fgil]

Que tal, un saludo a todos.
Tengo un pequeño problema, les platico.
Tengo una estructura similar a esta

Código HTML:

<div id="wrapper">
  <div id="header"></div>
  <div id="content"></div>
</div>
<div id="footer"></div>
 

Como podrán ver el footer está afuera del div"wrapper".

Necesito que la altura del footer se ajuste hacia abajo, dependiendo del monitor en donde se vea la página, para evitar que quede espacio en blanco.

Intenté poniendo min-height 100% al tag html, body y al footer, pero el resultado fue que el footer toma un tamaño fijo, como si duplicara la altura del wrapper y se genera un scroll innecesario.

Espero haber sido los suficientemente claro.

Muchas gracias de antemano por su ayuda.

[pzin]

Bienvenido al foro fgil.

¿Tal vez lo que estés buscando es que el footer esté siempre abajo? Para ese caso puedes usar un sticky footer: http://www.cssstickyfooter.com

Cuando publiques código intenta usar code o highlight para que se vea mejor.

[fgil]

Gracias, tomaré en cuenta lo del código.

No es un stickyfooter lo que necesito, porque eso haría que el fiiter siempre estuviera en la parte de abajo y vamos a suponer que lo único que tengo de contenido es la famosa línes "hola mundo"

El div del contenido tendría un alto muy reducido, y entre este y el footer, que estaría hata abajo de la página, habría mucho espacio en blanco.

Lo que necesitaría es que el footer se pegara a donde termina el div que contiene la línea "hola mundo" pero se extendiera hasta la parte de abajo de la pantalla llenando todo el espacio.

Gracias nuevamente.

[pzin]

Iniciado por fgil

No es un stickyfooter lo que necesito, porque eso haría que el fiiter siempre estuviera en la parte de abajo y vamos a suponer que lo único que tengo de contenido es la famosa línes "hola mundo"

Ok. Pensé que entendí mal y luego me inventé mi mundo.

Si conoces la altura que va a tener #wrapper, podrías hacer algo como:

Código CSS:

#footer {
  height: calc(100% - 300px);
}
 

Donde 300px corresponderían a la altura de #wrapper.

En caso de que la altura sea variable y/o desconocida, entonces tendrás que usar JavaScript, calcular la altura de #wrapper y ya en base a eso especificar la altura de #footer. Me temo que con CSS no es posible.

[quinqui]

Holas, fgil.

Cuando me ha tocado ese dilema, lo que he hecho es asignarle al body el estilo del footer, de modo que si sobra espacio luego de cualquier otro elemento antes del footer, lo que sobre queda con la apariencia de este footer. Esto lo hago así porque no conozco la forma de lograrlo en CSS. Pero, como dice pzin, sí lo podrías lograr con javascript, aunque eso pondría un poco lenta la carga de la página.

Y volviendo a la sugerencia de pzin: ¿¿es posible realizar cálculos con valores en distintos formatos?? eso sería una maravilla!! O_o (lo digo por el ejemplo de restarle un valor en píxels a otro en porcentaje).

Saludos!

[pzin]

Iniciado por quinqui

¿¿es posible realizar cálculos con valores en distintos formatos?? eso sería una maravilla!! O_o (lo digo por el ejemplo de restarle un valor en píxels a otro en porcentaje).

Si. Para eso es justamente calc(). Si sólo se pudiesen hacer cálculos con el mismo tipo de medida, no tendría mucho sentido ya que se pondría directamente.

Puedes hacer sumas, restas, multiplicaciones y divisiones.

http://www.w3.org/TR/css3-values/#calc

[quinqui]

Wow! Gracias por el dato! Con esto me despido de javascript para muchas cosas :D