Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Opa galera tudo beleza? Então criei um layout de um dashboard com css grid e eu gostaria de fixar o menu lateral na esquerda e a barra que está em cima e quando eu rolasse para baixo a unica coisa que mexesse fosse o conteúdo da direita. Já tentei usar o position fixed mas ele quebra a página, tentei usar o position: sticky mas ele não funciona. Alguém sabe como resolver isso ?
Acho que me expressei mal sobre a quebra da página, não é como se todo o site ficasse torno com os componentes em lugares errados o real problema é que os componentes acabam ficando um por cima do outro devido ao fixed. Existe exemplos disso em dashboard (área do admin) nos templetes em que existe uma barra o menu lateral, geralmente à esquerda, e todo o conteúdo a direita, quando há uma rolagem apenas esse conteúdo localizado nessa parte se move. O exemplo de código que você mostrou funciona perfeitamente mas eu gostaria de fazer isso com o css grid.
HTML:
<body>
<main>
<nav></nav>
<section>
hi
</section>
<article>
<p>conteudo</p>
</article>
</main>
</body>
CSS:
body {
margin: 0;
} display: grid;
grid-template-columns: 20% 55% 25%;
grid-template-rows: 55px 1fr;
background: grey;
}
nav {
background: blue;
grid-row: 1;
grid-column: 1 / 4;
position: sticky;
top: 0;
}
section {
background: grey;
grid-column: 1 / 2;
grid-row: 2;
position: sticky;
top: 60px;
left: 0;
align-self: start;
}
article {
background: yellow;
grid-column: 2 / 4;
}
article p {
padding-bottom: 1500px;
}
JSBin: [https://jsbin.com/tifonawuxu/1/edit?html,css,output](https://jsbin.com/tifonawuxu/1/edit?html,css,output)Funcionou perfeitamente, muito obrigado.
Se for para acompanhar a rolagem tem que usar fixed.
O fato de está quebrando o html é quase certeza absoluta que é por causa de erros na estrutura html.
Uma vez que a propriedade fixed não altera o fluxo de outras tag's no documento.
Obs.: Nesses casos para melhor ajudar seria bom apresentar algum website que usa algo igual ou similar ao pretendido, até mesmo imagens podem ajudar. Sendo o código em si menos relevante.
>
6 horas atrás, Sapinn disse:
menu lateral na esquerda
>
6 horas atrás, Sapinn disse:
barra que está em cima
>
7 horas atrás, Sapinn disse:
unica coisa que mexesse fosse o conteúdo da direita
Na verdade o outros elementos que vão se "mover"
Dê uma olhada nisso, pelo que você mencionou foi o que imaginei que está tentando fazer:
Spoiler