Si hallas algún fallo con tu código o proyecto, recuerda probar siempre en un ambiente de testing antes aplicar el código al trabajo final.
Solución:
Todavía puede seguir este ejemplo mencionado en https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Simplemente agregue este código a styles.scss
html,
body
height: 100%;
En tus app.component.scss
:host
display: flex;
min-height: 100%; // used percent instead of vh due to safari bug.
flex-direction: column;
.Site-content
flex: 1;
En tus app.component.html
...
..
Hay varias maneras de lograr esto. Supongo que has probado uno de estos: trucos CSS: pie de página fijo, cinco formas.
Para que eso funcione, necesitarías:
- Elimina el posicionamiento absoluto tanto del pie de página como del contenido.
- Eliminar los márgenes superior e inferior predeterminados del cuerpo.
- Si no va con la opción de cuadro flexible o cuadrícula, coloque todo el contenido excepto el pie de página dentro de una elemento (para que pueda asegurarse de que la altura total de ese elemento más el pie de página sea al menos la altura de la ventana gráfica).
Aquí hay una implementación de su aplicación Angular2 con un pie de página fijo.
El pie de página fijo se logra envolviendo todo el contenido principal en un solo div y usando calc() para establecer su altura mínima a 100vh menos la altura del pie de página.
Tienes la opción de añadir valor a nuestro contenido tributando tu veteranía en las críticas.