Largura do elemento muda ao trocar o 'position' para 'fixed'

29 de outubro de 2021 5 respostas

Zeca_Peteca 29 de outubro de 2021

O elemento no qual eu preciso usar o position: fixed é o #menu. Usei flex no container #main para alinhar os elementos em row.

O #menu sem o position: fixed fica com cerca de 214px de largura; Com o position: fixed fica com 330px de largura, porém eu não altero a width do mesmo em momento algum.

HTML:

<div id="main">
    <div id="menu"></div>
    <div id="view"></div>
    <div id="other"></div>
</div>

css:

#main{
    display: flex;
    flex-direction: row;
    width: 65%;
    height: 100%;
    margin: 0 auto;
}
#menu{
    width: 20%;
}

5 Respostas

wldomiciano 29 de out. de 2021

Normalmente o #menu tem 20% do tamanho do seu elemento pai, que no caso é #main.

Mas quando vc usa position:fixed, #menu é removido do fluxo normal do documento e passa a ter 20% do tamanho do viewport.

Zeca_Peteca 29 de out. de 2021

Tem alguma forma de contornar isso?

wldomiciano 29 de out. de 2021

Eu pesquisei aqui, mas não encontrei nenhum jeito que não envolva JavaScript.

Mas se vc explicar o que vc quer fazer, talvez a gente encontre um jeito melhor. Seria bom se vc tive um desenho ou algo do tipo mostrando o resultado final esperado.

Zeca_Peteca 29 de out. de 2021

Em vermelho: #menu
Em amarelo: #view
Em azul: #other

Tô fazendo um clone do twitter.
O objetivo é: ao rolar a tela, só a div em amarelo deve ser afetada. Usar overflow-y: scroll está fora de questão, pois o resultado não vai ficar bom e nem igual ao twitter verdadeiro.

wldomiciano 29 de out. de 2021

Então eu faria algo assim:

<div id="main">
  <div id="menu"></div>

  <div id="view">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Delectus sunt officiis quasi adipisci!</p>
    <p>Nobis voluptatem quisquam unde sunt!</p>
    <p>Explicabo natus dignissimos rerum hic.</p>
    <p>Quas maxime perspiciatis placeat temporibus.</p>
    <p>Reiciendis odit eligendi nobis tempore?</p>
    <p>Vero veniam et vitae voluptatum.</p>
    <p>Ad quibusdam natus excepturi reprehenderit.</p>
    <p>Vero quasi voluptatibus ut provident.</p>
    <p>Corrupti blanditiis id exercitationem consequuntur.</p>
    <p>Mollitia, error impedit. Temporibus, quo.</p>
    <p>Quam qui eaque placeat commodi.</p>
    <p>Accusantium aliquid eaque autem assumenda.</p>
    <p>Quis illo tenetur quia corrupti!</p>
    <p>Vel, odit unde? Earum, blanditiis.</p>
    <p>Quidem necessitatibus asperiores cum atque.</p>
    <p>Tenetur nesciunt aut maiores enim?</p>
    <p>Quam esse quae accusantium velit.</p>
    <p>Molestias repellat inventore repudiandae quos?</p>
    <p>Doloremque quo asperiores non eius.</p>
    <p>Harum praesentium dolorum iure quidem.</p>
    <p>A eos quia velit hic.</p>
    <p>Illo esse voluptatibus porro incidunt!</p>
    <p>Laboriosam necessitatibus architecto veniam sed?</p>
    <p>Maxime nobis perspiciatis ipsa aperiam.</p>
    <p>Distinctio dolorum veniam cum totam?</p>
    <p>Repudiandae eaque quod recusandae atque.</p>
    <p>Voluptatum ex quibusdam cum eligendi.</p>
    <p>Assumenda mollitia illo minus libero.</p>
    <p>Maxime eius doloremque voluptate corrupti!</p>
  </div>

  <div id="other"></div>
</div>

<style>
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  #main {
    border: solid 5px aqua;
    height: 100%;
    box-sizing: border-box;
    display: flex;
  }

  #menu {
    border: solid 5px red;
    box-sizing: border-box;
    width: 300px;
  }

  #view {
    border: solid 5px yellow;
    box-sizing: border-box;
    flex-grow: 1;
    overflow: auto;
  }

  #other {
    border: solid 5px blue;
    box-sizing: border-box;
    width: 300px;
  }

  #view p {
    border: solid 2px;
    padding: 20px;
  }
</style>

Criado 29 de outubro de 2021

Ultima resposta 29 de out. de 2021

Respostas 5

Participantes 2

5 Respostas

Topicos relacionados