Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Deixando o menu lateral fixo

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

3 respostas

Para ocupar a altura total pode utilizar o height: 100vh e para menu fixo usar position: fixed.

.menu_lateral{ position: fixed; height: 100vh; }

solução!

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.