2

Tenho uma página com flexbox, porem um dos itens eu preciso que fiquei fixo no final da página e tenha a mesma largura dos outros itens, mas ele ultrapassa a largura padrão.

html, body {width: 100%;height: 100%}
.pagina {display: flex;flex-direction: column;background: #ccc;width: 80%;height: 100%;margin: 0 auto;position: relative}
.bloco1 {background: green}
.bloco2 {background: pink;position: fixed;bottom: 0;width: 100%}
<div class="pagina">
  <div class="bloco1">Bloco 1</div>
  <div class="bloco2">Bloco 2 - Esse é fixo no final da página</div>
</div>

1
  • Vc precisa que o elemento fique no final da página o tempo inteiro, mesmo que tiver muito conteúdo na hora do scroll esse elemento deve permanecer no mesmo lugar sem rolar junto com a página?
    – hugocsl
    Commented 18/01/2019 às 15:59

2 Respostas 2

2

Você está esperando que o div "bloco2" tenha o mesmo tamanho no seu parent, o div "pagina".

Acontece que ao usar o display: fixed, o tamanho do elemento em questão se comporta em relação ao viewport, e não seu parent, por isso ele não fica com o mesmo width.

Como seu parent tem width: 80%, você precisa usar o mesmo width para que ele fique com o mesmo tamanho, ao invés do width: 100% que ele tem atualmente, ou usar inherit para forçar que herde do parent:

html, body {width: 100%;height: 100%}
.pagina {display: flex;flex-direction: column;background: #ccc;width: 80%;height: 100%;margin: 0 auto;position: relative}
.bloco1 {background: green}
.bloco2 {background: pink;position: fixed;bottom: 0;width: 80%}
<div class="pagina">
  <div class="bloco1">Bloco 1</div>
  <div class="bloco2">Bloco 2 - Esse é fixo no final da página</div>
</div>

2

Aqui eu usei o width: inherit o atributo inherit herda a largura do elemento pai, assim não permitindo que o um elemento filho ultrapassa o elemento pai..

html, body {width: 100%;height: 100%}
.pagina {display: flex;flex-direction: column;background: #ccc;width: 80%;height: 100%;margin: 0 auto;position: relative}
.bloco1 {background: green}
.bloco2 {background: pink;position: fixed;bottom: 0;width: inherit;}
<div class="pagina">
  <div class="bloco1">Bloco 1</div>
  <div class="bloco2">Bloco 2 - Esse é fixo no final da página</div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .