Gostaria de entender como posso fazer para que o carrossel + navbar (fixa) ocupem 100% da tela, e que isso aconteça para as divs e sections seguintes da página independente do dispositivo que estou utilizando. Utilizando os conceitos dessa unidade não consegui realizar a tarefa. Podem ajudar? Obrigado!
hoje, com a Alura e o Google Gemini
Você pode fazer
.carrossel{
height: calc(100vh - 50px) /*onde 50px seria o tamanho da navbar*/
}Olá, Rafael.
Infelizmente isso ainda não funcionou como esperado para mim. O que eu tentei e deu quase certo, foi o seguinte:
.img-carrossel {
min-height: 100vh;
max-height: 100vh;
object-fit: cover; /* comportamento da imagem em relação ao container preservando as proporções */
object-position: 0 0%; /* desloca no eixo X e Y a imagem dentro do container */
}O problema é que dessa forma a tela "trava" e por algum motivo não consigo deslocar as imagens do carrossel nem no eixo X nem no eixo Y (a tanto que deixei os valores zerados).
Não sei se fui claro com a minha dúvida. Vou tentar novamente. O que eu gostaria de fazer é que cada seção da página ocupasse 100% da tela enquanto o usuário utiliza os links da navbar fixa no topo para navegar entre elas. As seções se "ajustam" para ocupar 100% da visualização atual do usuário.
Oi Khayan tudo bem?
Poderia disponibilizar a pasta do seu projeto por gentileza no github. Assim podemos te ajudar mehor.