estoy realizando un proyecto y en la página index logré posicionar el footer al fondo de la página, pero al cambiar el tamaño de la ventana (minimizar tamaño) veo que la pag hace scroll y el footer no queda en el fondo sino que queda como si tuviera el valor position: sticky. en el ejemplo pueden ver sin poner en pantalla completa.
no se me ocurre alguna manera de solucionar esto, espero y puedan ayudarme.
body {
background: linear-gradient( 90deg, green, #ffb744 );
color: white;
font-weight: 700;
margin: 0;
}
.site-footer {
position: absolute;
background-color: white;
border-top: 3px solid black;
bottom: 0;
color: #099700;
padding: 20px 0;
width: 100%;
text-align: center;
}
.container {
height: 300px;
width: 50%;
margin: 0 auto;
background-color: white;
border: 2px solid black;
text-align: center;
color: black;
}
<body>
<div class="container">
cualquier texto
</div>
<footer class="site-footer">
aqui va el copyright
</footer>
</body>
absolute
, elbottom: 0
significa pegado al actual fondo de la pantalla. Obviamente si el contenido sigue para abajo, como tienesposition: absolute
el "footer" se queda en donde estaba en el momento que se dibujó. Si lo que quieres es que vaya al fondo "de todo", prueba a ponerle unposition: relative;
y verás como se coloca al final deldiv.container
.