CSS asides fixos nas laterais

WilliamNascimento · 10 de abril de 2021

Estou fazendo um clone do facebook para treinar , pelo que vi ele tem a main que sao as postagems e duas aside fixas nas laterais .

Separei com o grid porém quando lanco a position fixed que ele sai do documento e fica sem tamanho , nao consigo ajustar do tamanho do grid .

Tentei usar uma div dentro colocar width 100%; mas ela pega a tela toda . Se alguem puder dar um help

section.main{
    color:white;
    display:grid;
    grid-template-areas: "config posts friends";
    grid-template-columns: 1fr 2fr 1fr;
    align-items: start;
}

aside.configs{
    grid-area: "config";
    background-color: red;;
}
main.mainPosts{
    grid-area: "posts";
    background-color: blue;
}
aside.amigos{
    grid-area: "friends";
    background-color: pink;

}.vv{
    height: 200px;
}

   <section class = "main">
        <aside class = "configs">
            <div class = "listaConfigs">
                configuração
            </div>
        </aside>

        <main class = "mainPosts">
            <div class= "vv">
                posts
            </div>
        </main>

        <aside class = "amigos">
            <div class= "listaAmigos">
                amigos
            </div>
        </aside>

    </section>

Marcelo Calazans · 10 de abril de 2021

1 hora atrás, WilliamNascimento disse:

Estou fazendo um clone do facebook para treinar , pelo que vi ele tem a main que sao as postagems e duas aside fixas nas laterais .

Olá colega.

Não parece ser assim que o Facebook monta a sua página.

Depurando o código, posso ver que ele usa o display: flex

Veja abaixo a parte em azul:

Ela se refere no código a um display flex, assinalado na imagem abaixo com o círculo vermelho.

Se eu fosse pensar em fazer algo assim, eu acho que iria também de display: flex

Abraços e espero ter dado uma "luz".

Marcelo Calazans · 10 de abril de 2021

O que você acha deste?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<style>
body { margin: 0; padding: 0; }

.foto-capa { 
   width: 100%;
   height: 200px;
   background-color: rgba(126,126,126,1.00);
}

.container {
   width: 90%;
   margin: 0 auto;
}

.main {
   display: flex;
}

.esquerda {
   background-color: aqua;
}

.esquerda p {
   width: 100%;
}

.direita {
   background-color: darkseagreen;
}

.direita p {
   width: 100%;
}
  
</style>

<div class="foto-capa">
     FOTO DE CAPA 
</div>

<div class="container">
     <div class="main">
          <div class="esquerda">
               <p>APRESENTAÇÂO</p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce posuere lorem eget eros efficitur, quis scelerisque ipsum efficitur. Morbi vehicula quis purus ac lobortis. Morbi cursus leo ornare dui faucibus porttitor. Vestibulum nisl nisl, dignissim et egestas eu, fermentum a ipsum. Maecenas in purus porta, laoreet velit ut, auctor magna. Donec eros massa, cursus vitae consequat vel, sollicitudin mollis nunc. Aliquam elementum metus in tortor cursus, eu dictum ipsum imperdiet. Sed euismod est iaculis diam cursus vestibulum. Nulla accumsan est velit, nec imperdiet enim blandit ac.</p>

               <p>Quisque eget lacus ac urna consequat laoreet vitae nec sapien. Fusce porttitor dolor ut tincidunt commodo. Cras sit amet massa enim. Aenean mattis sollicitudin massa, a condimentum ligula rhoncus et. Duis interdum ultrices feliz, id mollis nisl dictum vehicula. Vivamus id erat vel magna luctus elementum. Nunc vel viverra feliz. Sed sed velit sed lectus euismod fermentum eu vitae nibh. Aliquam efficitur in lacus eu cursus. Cras malesuada tincidunt lorem, vel vehicula risus lacinia eget. Vivamus hendrerit quis arcu quis cursus. Curabitur odio tortor, rhoncus non lectus in, malesuada rutrum lorem. Phasellus tincidunt mauris in auctor malesuada. In eu sollicitudin justo. Nulla tortor elit, venenatis id ornare porta, congue at tellus. Duis ut consequat neque.</p>
          </div>
          
          <div class="direita">
               <p>PUBLICAÇÔES</p>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce posuere lorem eget eros efficitur, quis scelerisque ipsum efficitur. Morbi vehicula quis purus ac lobortis. Morbi cursus leo ornare dui faucibus porttitor. Vestibulum nisl nisl, dignissim et egestas eu, fermentum a ipsum. Maecenas in purus porta, laoreet velit ut, auctor magna. Donec eros massa, cursus vitae consequat vel, sollicitudin mollis nunc. Aliquam elementum metus in tortor cursus, eu dictum ipsum imperdiet. Sed euismod est iaculis diam cursus vestibulum. Nulla accumsan est velit, nec imperdiet enim blandit ac.</p>

               <p>Quisque eget lacus ac urna consequat laoreet vitae nec sapien. Fusce porttitor dolor ut tincidunt commodo. Cras sit amet massa enim. Aenean mattis sollicitudin massa, a condimentum ligula rhoncus et. Duis interdum ultrices feliz, id mollis nisl dictum vehicula. Vivamus id erat vel magna luctus elementum. Nunc vel viverra feliz. Sed sed velit sed lectus euismod fermentum eu vitae nibh. Aliquam efficitur in lacus eu cursus. Cras malesuada tincidunt lorem, vel vehicula risus lacinia eget. Vivamus hendrerit quis arcu quis cursus. Curabitur odio tortor, rhoncus non lectus in, malesuada rutrum lorem. Phasellus tincidunt mauris in auctor malesuada. In eu sollicitudin justo. Nulla tortor elit, venenatis id ornare porta, congue at tellus. Duis ut consequat neque.</p>
          </div>
     </div>
</div>


</body>
</html>