[SOLUCIONADO] Poner una caja en posicion fija.

[Iballa]

Hola, estoy haciendo un footer, y quiero dejarlo fijo, aunque se mueva la barra lateral de desplazamiento.

Lo hago con position:fixed.. Le pongo a la caja padre del footer un position:relative, para darle a la caja hija unas coordenadas a partir de la caja padre, tal y como hay que hacer según el manual, pero no me sale, y no se por qué. La caja hija, la que me interesa que salga, desaparece cuando le doy fixed position, en cambio, si le doy position:absolute a la caja hija, si me sale, aunque obviamente, no se queda fija. ¿alguien me puede ayudar? gracias

Código HTML:

<footer>
      <div id="footer2">
         <p>xxxxxxxxx</p>
         
      </div>
    </footer>
 

Código CSS:

/*PIE*/
footer {
    
    position: absolute;
    
}
#footer2 {
    background: #697F45;
    color: white;
    font-size: 0.8em;
    padding: 1em;
    padding-bottom: 2em;
    position:fixed;
    top: 0px;
    text-align: center;
    
 
}
 

[Rafael]

Usa esta solución: http://www.cssstickyfooter.com/

[Iballa]

Iniciado por Rafael

Usa esta solución: http://www.cssstickyfooter.com/

[pzin]

Las posiciones fijas nunca son relativas al elemento padre, sino al área visible del navegador; el viewport.
Entonces lo que tienes que hacer es ponerle al elemento footer una posición fija, y luego ajustar lo que quieras del elemento hijo.

Código CSS:

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
}
 
footer > div {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
 

Lo del Sticky Footer en realidad es otra cosa. Aunque personalmente prefiero un Sticky Footer a uno con posición fija.

[Iballa]

Gracias pzin, me lio como una persiana...

Bueno, les dejo otros usos interesantes de esa cinta plateada mágica.

[Rafael]

Oh. Ya entendí.
Lo que querías era un really sticky sticky footer...

[Iballa]

Iniciado por Rafael

Oh. Ya entendí.
Lo que querías era un really sticky sticky footer...

Curiosamente acabo de volver de hacer gimnasia, mejor dicho, de ir pero no hacer: tuve que dar media vuelta porque se me salió la suela del zapato casí entera. Me acordé mucho de este post. Ahora sí que necesito un sticky sticky footer, jeje.

[Rafael]

.