0

Tenho duas divs,

DIV 1 com 80% de largura, centralizada e tenho a DIV 2 que está dentro da DIV 1, que quero que esteja com 100% de largura, mas, como ela está dentro da DIV 1 que tem 80%, então, 100% passa a ser os 100% da DIV 1 (Virando 80%). Mas quero que a DIV 2 tenha 100% da largura ta tela, mesmo estando dentro da DIV 1, tem como fazer isso?

<div class="1"> <!--TEM 80%-->
<div class="2"></div><!--TEM 100%, ou seja, pega o total da DIV1, mas quero que seja 100% da TELA TODA---->
</div>

inserir a descrição da imagem aqui

4
  • 1
    tente usar width:100vw; que vai pegar o tamanho total da tela, caso queira reduzir algum valor basta usar width:calc(100vw - 20px); Commented 19/05/2017 às 12:52
  • Obrigado Guilherme, era pra ate dar certo, mas não da, conforme minha print, ele ignora parece o position absolut e começa a contar a tela a partir da div e não da tela. Commented 19/05/2017 às 12:59
  • 1
    Lembrando que eu não usei % e sim vw. Segundo, você tem algum position:relative antes desta div? Commented 19/05/2017 às 13:04
  • Ja achei, Guilherme, mas tinha sim, outro na div pai, ai com a ajuda do Mathias consegui resolver, mas obrigado também! Commented 19/05/2017 às 13:22

1 Resposta 1

2

Basta adicionar a propriedade position: absolute; na <div class="2">, segue um snippet de exemplo:

#div1 {
  width: 80%;
  border: 1px solid green;
  height: 20px;
}

#div2 {
  width: 100%;
  border: 1px solid red;
  height: 20px;
  position: absolute;
}
<div id="div1">
  <div id="div2">
  </div>
</div>

5
  • Então, eu estava fazendo isso, tentando, mas mesmo com o position absolut no meu site não funciona, ele fica 100% do tamanho da div 1 e não da tela toda, não sei o por que. Commented 19/05/2017 às 12:45
  • Estranho, tenta colocar um snippet que reproduza esse problema aqui na pergunta, ai talvez eu edite minha resposta p/ te ajudar melhor.
    – Mathiasfc
    Commented 19/05/2017 às 12:47
  • Olha a print Mathias, não consigo reproduzir em snippet 100% porque é meio grande, ve se com a print consegue entender. Commented 19/05/2017 às 12:55
  • Entendi sim, @LucasCarvalho tenta dar uma olhada se algum elemento pai está com position:relative; isso pode impedir o elemento de ficar com width:100%;.
    – Mathiasfc
    Commented 19/05/2017 às 13:01
  • O Pai também está com position absolut, ai removi pra testar e a té funcionou, mas ai desconfigura o pai. Vou ter que pensar num jeito... Commented 19/05/2017 às 13:13

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 .