Como conseguir que un footer se mantenga en el fondo sin que sobrepase otros elementos?

publicado por: Anonymous

Estoy teniendo problemas para colocarlo actualmente esta con el atributo absolute, el problema es que debido a esto funciona como si fuese transparente y los objetos lo atraviesan.

https://i.gyazo.com/2cdc72727b7140cd6de1eda90e2d7f98.mp4

Me gustaria que se mantuviera un espacio de forma que esto no ocurriese.

Estoy usando tailwindcss este es el trozo de codigo que pertenece al div principal del footer.

<div style="background-color: #0080ff" class="container bg-grey-lighter absolute pin-b pin-x p-8 pt-3 pb-3">

El div esta contenido dentro de la etiqueta footer

Al usarlo como static se mantiene en un punto fijo por lo que no varia dependiendo de el tamaño o la resolucion de la pantalla

Se mantiene estatico :L

solución

Para la posicion de los elementos dependiendo del espacio en pantalla o viewport debes utilizar algo nuevo de CSS3 que es la unidades de medida en vh. Te dejo unos link para que leas y puedas ver Link 1 Link 2

me imagino que tienes algo como esto:

<header>
    <!-- TU HEADER -->
</header>
<main style="height: 100vh;">
    <!-- TU FORMULARIO -->
</main>
<footer>
    <!-- TU FOOTER -->
<footer>

Aca es donde debes jugar con el valor de height ya que como tienes un header un main y un footer no debería ser 100 ai no que menos. Guiate por los ejemplos en Internet de como utilizar esta nueva medida de css3

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *