Skip to main content
adicionou 32 caracteres ao conteúdo
Fonte Link
OtavioCapel
  • 1,5mil
  • 8
  • 17

Aqui eu usei o width: inherit;inherit basicamente 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>

Aqui eu usei o width: inherit; basicamente o inherit herda a largura do elemento pai, assim não 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>

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>

Fonte Link
OtavioCapel
  • 1,5mil
  • 8
  • 17

Aqui eu usei o width: inherit; basicamente o inherit herda a largura do elemento pai, assim não 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>