A marcação da página
A marcação da página será bem típica: um elemento wrapper que incluirá o cabeçalho da página, o conteúdo da página e o rodapé da página como este:
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
Claro, o body O elemento também pode funcionar como wrapper da página, mas eu sempre prefiro deixar esse elemento com um estilo básico.
Nosso rodapé incluirá alguns widgets. Embora não discutiremos nada sobre eles aqui, é importante notar que em um próximo tutorial usaremos esta demonstração e aprenderemos duas maneiras de tornar os widgets de rodapé dinâmicos com o WordPress.
Usar o flexbox para um rodapé fixo requer as seguintes ações:
- Faremos do wrapper da página um contêiner flexível e daremos a ele uma altura mínima igual à altura da janela de visualização.
- Empilharemos os itens flexíveis verticalmente – de cima para baixo.
- O
mainelemento irá se expandir para cobrir o espaço disponível dentro do flex container. Para fazer isso, vamos darflex-grow: 1. Lembre-se de que, por padrão, todos os itens flexíveis possuemflex-grow: 0. - Opcionalmente, para centralizar verticalmente o conteúdo dentro do
mainelemento, também o definiremos como um flex container e daremos a elealign-items: center.
Outra maneira de centralizar verticalmente os itens flexíveis é com margens automáticas.
Aqui estão os estilos correspondentes:
1 |
.site-wrapper { |
2 |
display: flex; |
3 |
flex-direction: column; |
4 |
min-height: 100vh; |
5 |
}
|
6 |
|
7 |
.site-main { |
8 |
display: flex; |
9 |
align-items: center; |
10 |
flex-grow: 1; |
11 |
}
|
12 |
|
13 |
/*AUTO MARGINS - INSTEAD OF align-items: center*/
|
14 |
.site-main > * { |
15 |
margin-top: auto; |
16 |
margin-bottom: auto; |
17 |
}
|
Usar CSS Grid para um rodapé fixo requer as seguintes ações:
- Faremos do wrapper da página um contêiner de grade e daremos a ele uma altura mínima igual à altura da janela de visualização.
- Definiremos as linhas da grade e seu tamanho usando
grid-template-rows: auto 1fr auto. Isso significa que o cabeçalho e o rodapé da página serão tão altos quanto o conteúdo, enquanto omainelemento terá uma altura igual a1frentão crescerá para ocupar o espaço vertical vazio. - Opcionalmente, para centralizar verticalmente o conteúdo dentro do
mainelemento, vamos defini-lo como um flex container e dar-lhealign-items: center.
Tanto a propriedade flex-grow quanto a unidade CSS fr funcionam de forma semelhante. O primeiro distribui o espaço restante dentro do contêiner entre os itens flexíveis, enquanto o último distribui o espaço restante dentro do contêiner entre as linhas/colunas da grade. Uma diferença importante é que definimos a propriedade flex-grow para os itens flexíveis, enquanto a unidade fr para os contêineres da grade.
Aqui estão os estilos correspondentes:
1 |
.site-wrapper { |
2 |
display: grid; |
3 |
grid-template-rows: auto 1fr auto; |
4 |
min-height: 100vh; |
5 |
}
|
6 |
|
7 |
.site-main { |
8 |
display: flex; |
9 |
align-items: center; |
10 |
}
|
Conclusão
Neste tutorial, examinamos duas maneiras de construir um rodapé fixo (fixo). O poder do CSS moderno nos permite criar coisas assim com o mínimo esforço e sem poluir a marcação com coisas desnecessárias.
Conforme discutido, em um próximo tutorial iremos desenvolver esta demonstração e aprender dois métodos para tornar os widgets de rodapé dinâmicos no WordPress. Fique atento!
Como sempre, muito obrigado pela leitura!
Tutoriais de grade Flexbox/CSS no Tuts+
Interessado em mais tutoriais sobre Flexbox e CSS Grid? Confira esses recursos abaixo!
