Así es justamente si tenemos muchos registros, como estamos viendo pantalla, ocurre un overflow.
Por lo tanto se rompe nuestra página.
Acá tenemos que arreglar.
Bueno, acá lo que hice básicamente es duplicar la cantidad de registro que teníamos en el Piquet.
Simplemente copian más insert en el import.
Ese huele bien, pero solucionamos este problema y nos vamos al proyecto angular.
Y lo primero que tenemos que hacer es agregar un par de estilos estilos globales.
Por lo tanto, no vamos a ir a estil puntos CSS, nuestro archivo global para los estilos.
Entonces lo primero es definir una posición relativa para el documento HTML, para el documento completo
como posición relativa a lo que hacemos definir al padre, al HTML en una posición respecto al flujo
normal de la página.
Por lo tanto, el footer, como tiene una posición absoluta, no está dentro del flujo normal de la
página, pero va a tomar como referencia el elemento padre que contenga la posición relativa más cercana.
En este caso, el documento HTML se va a posicionar en ese flujo respecto al elemento padre.
Por eso es importante tener un elemento padre con posición relativa, y este elemento que queremos acomodar
o posicionar al fondo al bottom lo dejamos en una posición absoluta y le vamos a dar una altura mínima
del 100 porciento.
Entonces un min height.
Perfecto.
Y guardamos lo siguiente es un body en el boy.
Vamos a agregar un margen puto que tenga exactamente la misma altura que el footer.
Así que vámonos al footer para revisar.
Vemos los estilos y acá tenemos que la altura es de 60 Packy.
Entonces acá tenemos que tener un margen bottom de 60 Pettis.
Vamos a guardar, veamos cómo está hackeando.
Si se fijan debajo, pero todavía falta acá una parte que se oculta en el futuro.
Pero por lo menos ya lo mantenemos el footer a fondo.
Si ya está perfecto y nos vamos al app component junto html y acá le vamos a dar un padding en el buto
abajo.
Acá hay que ir viendo.
Por ejemplo, si colocamos 3 posiblemente no sea suficiente, pero veamos, se fijan que baja un poco
más y ya está más separado.
Incitamos en 5 5.
Es el máximo.
No hay más.
Perfecto.
Bueno, hoy quedó mucho mejor.
Hoy está perfecto la separación.
Está todo bien.
Eso sería una forma.
Otra forma es quitar este padding de 5 y vamos a agregar nuestra propia clase personalizada grupo.
El nombre que quieran.
Se pueden colocar group o lo que sea.
La voy a crear acá.
Es un Klauss, por lo tanto, toda un punto pasa reference class las llaves y vamos a agregar un padding
putón de la misma altura también que el footer de 60 px.
Y guardamos, guardamos también el componente, vamos a revisar.
De perfecto, pero bien, eso es todo para mejorar nuestro layout, para que nuestro footer y siempre
esté al fondo, al fondo de nuestra página.
Llegamos hasta acá y como siempre, con qué duda preguntarla en el foro nos vemos.