1
00:00:00,150 --> 00:00:06,090
Así es justamente si tenemos muchos registros, como estamos viendo pantalla, ocurre un overflow.

2
00:00:06,150 --> 00:00:07,620
Por lo tanto se rompe nuestra página.

3
00:00:07,710 --> 00:00:08,970
Acá tenemos que arreglar.

4
00:00:09,050 --> 00:00:14,310
Bueno, acá lo que hice básicamente es duplicar la cantidad de registro que teníamos en el Piquet.

5
00:00:14,400 --> 00:00:16,980
Simplemente copian más insert en el import.

6
00:00:17,040 --> 00:00:21,750
Ese huele bien, pero solucionamos este problema y nos vamos al proyecto angular.

7
00:00:21,870 --> 00:00:25,450
Y lo primero que tenemos que hacer es agregar un par de estilos estilos globales.

8
00:00:25,500 --> 00:00:30,870
Por lo tanto, no vamos a ir a estil puntos CSS, nuestro archivo global para los estilos.

9
00:00:30,960 --> 00:00:36,690
Entonces lo primero es definir una posición relativa para el documento HTML, para el documento completo

10
00:00:36,690 --> 00:00:42,030
como posición relativa a lo que hacemos definir al padre, al HTML en una posición respecto al flujo

11
00:00:42,030 --> 00:00:43,140
normal de la página.

12
00:00:43,170 --> 00:00:48,330
Por lo tanto, el footer, como tiene una posición absoluta, no está dentro del flujo normal de la

13
00:00:48,330 --> 00:00:54,820
página, pero va a tomar como referencia el elemento padre que contenga la posición relativa más cercana.

14
00:00:54,870 --> 00:01:00,720
En este caso, el documento HTML se va a posicionar en ese flujo respecto al elemento padre.

15
00:01:00,780 --> 00:01:06,660
Por eso es importante tener un elemento padre con posición relativa, y este elemento que queremos acomodar

16
00:01:06,750 --> 00:01:13,770
o posicionar al fondo al bottom lo dejamos en una posición absoluta y le vamos a dar una altura mínima

17
00:01:13,860 --> 00:01:14,790
del 100 porciento.

18
00:01:15,740 --> 00:01:17,130
Entonces un min height.

19
00:01:19,200 --> 00:01:19,860
Perfecto.

20
00:01:20,460 --> 00:01:25,200
Y guardamos lo siguiente es un body en el boy.

21
00:01:25,710 --> 00:01:30,270
Vamos a agregar un margen puto que tenga exactamente la misma altura que el footer.

22
00:01:30,360 --> 00:01:32,760
Así que vámonos al footer para revisar.

23
00:01:33,330 --> 00:01:37,090
Vemos los estilos y acá tenemos que la altura es de 60 Packy.

24
00:01:37,860 --> 00:01:41,640
Entonces acá tenemos que tener un margen bottom de 60 Pettis.

25
00:01:44,270 --> 00:01:45,950
Vamos a guardar, veamos cómo está hackeando.

26
00:01:46,040 --> 00:01:51,780
Si se fijan debajo, pero todavía falta acá una parte que se oculta en el futuro.

27
00:01:52,130 --> 00:01:55,280
Pero por lo menos ya lo mantenemos el footer a fondo.

28
00:01:55,370 --> 00:02:03,110
Si ya está perfecto y nos vamos al app component junto html y acá le vamos a dar un padding en el buto

29
00:02:03,230 --> 00:02:03,680
abajo.

30
00:02:04,370 --> 00:02:05,750
Acá hay que ir viendo.

31
00:02:05,750 --> 00:02:13,010
Por ejemplo, si colocamos 3 posiblemente no sea suficiente, pero veamos, se fijan que baja un poco

32
00:02:13,010 --> 00:02:14,180
más y ya está más separado.

33
00:02:14,300 --> 00:02:16,790
Incitamos en 5 5.

34
00:02:16,790 --> 00:02:17,450
Es el máximo.

35
00:02:17,570 --> 00:02:18,170
No hay más.

36
00:02:18,380 --> 00:02:18,890
Perfecto.

37
00:02:20,110 --> 00:02:21,400
Bueno, hoy quedó mucho mejor.

38
00:02:21,460 --> 00:02:24,010
Hoy está perfecto la separación.

39
00:02:24,100 --> 00:02:24,730
Está todo bien.

40
00:02:25,210 --> 00:02:26,530
Eso sería una forma.

41
00:02:26,740 --> 00:02:35,910
Otra forma es quitar este padding de 5 y vamos a agregar nuestra propia clase personalizada grupo.

42
00:02:36,220 --> 00:02:37,030
El nombre que quieran.

43
00:02:37,090 --> 00:02:38,940
Se pueden colocar group o lo que sea.

44
00:02:40,450 --> 00:02:41,740
La voy a crear acá.

45
00:02:41,920 --> 00:02:48,700
Es un Klauss, por lo tanto, toda un punto pasa reference class las llaves y vamos a agregar un padding

46
00:02:48,700 --> 00:02:52,690
putón de la misma altura también que el footer de 60 px.

47
00:02:56,770 --> 00:03:01,240
Y guardamos, guardamos también el componente, vamos a revisar.

48
00:03:01,450 --> 00:03:07,570
De perfecto, pero bien, eso es todo para mejorar nuestro layout, para que nuestro footer y siempre

49
00:03:07,660 --> 00:03:10,590
esté al fondo, al fondo de nuestra página.

50
00:03:10,630 --> 00:03:15,250
Llegamos hasta acá y como siempre, con qué duda preguntarla en el foro nos vemos.