Eu gostaria de saber se tem como e se tiver como eu faço para deixar o menu lateral de forma fixa quando eu desço a tela ( tipo acompanhado quando desce) e também que ela ocupe de forma total a altura da tela
Eu gostaria de saber se tem como e se tiver como eu faço para deixar o menu lateral de forma fixa quando eu desço a tela ( tipo acompanhado quando desce) e também que ela ocupe de forma total a altura da tela
Para ocupar a altura total pode utilizar o height: 100vh e para menu fixo usar position: fixed.
.menu_lateral{ position: fixed; height: 100vh; }
Oi Caio, tudo bem?
Tem sim! Você pode fazer dessa forma:
@media screen and (min-width: 1440px) {
.menu-lateral {
position: fixed;
left: 0;
height: 100vh;
width: 200px;
grid-column: 1;
grid-row: 1 / span 2;
}
Dar um position:fixed
para fixar quando você desce a tela, e o height:100vh
para ocupar de forma total como você queria.
Para que ele reconheça a largura do menu lateral, você vai ter que tirar o auto do grid-template-columns
e colocar um valor, no caso coloquei 200px
.
@media screen and (min-width: 1440px) {
body {
display: grid;
grid-template-columns: 200px 1fr;
}
Você pode ver aqui nesse gif que fiz no meu projeto, ficou muito legal! Sua ideia foi muito boa, parabéns :D
Espero ter ajudado!
Um abraço e bons estudos.
Muito obrigado Lorena e Mateus ajudaram muito.