0

Preciso colocar uma div com a propriedade position = absolute. Porém, a div pai tem um padding e o width: 100% da div filho não respeita esse padding.

Será que a única saída seria definir o width com o javascript?

Coloquei um exemplo aqui:

.master {
  background-color: red;
  width: 200px;
  height: 300px;
  padding: 10px;
  position: relative;
}

.child {
  width: 100%;
  height: 30px;
  background-color: yellow;
  position: absolute;
}
<div class="master">
  <div class="child">
  
  </div>
</div>

5
  • Não entendi se você quer respeitar o padding e reduzir a largura do amarelo, ou se apenas resposicionar o amarelo. Posicionamento absoluto não respeita padding dos ancestrais.
    – bfavaretto
    Commented 19/07/2017 às 19:54
  • Eu quero respeitar o padding Commented 19/07/2017 às 19:56
  • O padding altera o tamanho do elemento, então é esperado que o elemento filho, configurado com width: 100%, fique também com 220px de largura. Tire o position: absolute, como o @bfavaretto disse e terá um elemento com 200px.
    – Woss
    Commented 19/07/2017 às 20:05
  • Se você quer que um div ocupe todo o espaço de largura do pai, respeitando os paddings, por que então usar position: absolute? Usar o div no seu padrão já faz isso. Só tirar as propriedades width e position dali.
    – Dudaskank
    Commented 19/07/2017 às 21:00
  • Ali só foi um exemplo, preciso do position: absolute porque essa div amarela vai ficar flutuando por cima do conteúdo restante Commented 19/07/2017 às 21:43

1 Resposta 1

1

Se entendi bem, é isso que você quer.

*,*:before,*:after{
    box-sizing: border-box;
}

.pai{
    position: relative;
    width: 300px;
    height: 300px;
    background: black;
    padding: 10px;
}

.filho{
width: calc(100% - 10px);
height: 50px;
background: red;
position: absolute;
left: 5px;
}
<div class="pai">
        <div class="filho">
            
        </div>
    </div>

6
  • Na verdade é quase isso, mas o width da div filho teria que ter o 100% da div pai menos o padding da div pai. Commented 19/07/2017 às 19:55
  • @RobertoFagundes Atualizei Commented 19/07/2017 às 20:05
  • Obrigado, funcionou da forma que eu esperava Commented 19/07/2017 às 20:08
  • Vale lembrar que calc é uma tecnologia em experiência e deve ser utilizada com muita cautela. É possível que alguns navegadores não suportem ou que tenha um comportamento diferente do esperado.
    – Woss
    Commented 19/07/2017 às 20:10
  • Na verdade, calc(100% - 20px);, pois tem padding dos dois lados, e retirar o left do filho.
    – Dudaskank
    Commented 19/07/2017 às 20:59

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 .