[SOLUCIONADO] Ubicar footer siempre al final de la pagina

[LordJhony]

Hola.
Estoy intentando ubicar el footer de mi pagina siempre al final, pero me resulta un problema, si la pagina tiene poco contenido este no llega hasta abajo.

He buscado en internet y todos los ejemplos que he visto usan un div identificado como footer así

Código HTML:

<div id="footer">
 contenido
</div> 

Pero yo no estoy trabajando mi footer de esa manera sino que estoy usando la etiqueta footer

Código HTML:

<footer>
 contenido
</footer> 

Así que no he logrado hallar una solución a lo que necesito. Si alguien me pudiera indicar la manera de hacerlo, muchas gracias.

[Rafael]

Eso depende del CSS, no de la etiqueta html.

https://css-tricks.com/snippets/css/sticky-footer/

[manuparquegiralda]

Verás, en realidad da igual cualquiera de los dos métodos que utilices. Es completamente indiferente usar <div class="footer"> que la etiqueta <footer>, lo que importa son los estilos CSS que apliques a esos elementos.

Que yo vea te daría dos opciones. Una la más sencilla, darle un min-height a la etiqueta BODY, de esta manera, el pie de página siempre te quedará abajo. Lo que pasa es que al hacer esto es que como tu web la van a avisitar desde diferentes dispositivos y resoluciones de pantalla, tendrás que utilizar la eitqueta @media de CSS para poder ir ajustando el min-height del BODY en función de la resolución de pantalla del dispositivo que esté visitando la página.

Otra es utilizar Javascript para detectar el alto de la pantalla y aplicar entonces la diferencia del alto del pie de página y la cabecera en relación al alto de la pantalla para aplicar o no un min-height a la etiqueta BODY.

La segunda opción te dará más posibilidades en lo que a exactitud se refiere ya que puedes usar operadores para ajustarlo al milímetro, pero tendrás que incluir más código y cargar código javascript al principio de la página para que no se aprecie que el BODY cambia de tamaño.

[Rafael]

manuparquegiralda, con JavaSpcript no tiene sentido. Revisa lo simple que es el link que he puesto. Css puro y con html limpio.

Hay de hecho diversas opciones: https://www.google.com.mx/search?q=sticky+footer+css

Uno super simple que uso es:

Código CSS:

html {
    position: relative; min-height: 100%;}
 
body {
    margin: 0 auto 150px; /* El inferior es igual al alto del footer */}
 
footer {
    height: 150px;
    position: absolute; left: 0; bottom: 0; width: 100%;}
 

Sacado de acá: http://mystrd.at/modern-clean-css-sticky-footer/

[baldaweb]

Otra opción

https://donnierock.com/2013/11/29/pi...nal-de-la-web/

[Rafael]

Aunque eso de poner contenedores adicionales, ya no aplica.

[LordJhony]

Gracias por sus respuestas. Me sirvieron mucho...