4

Importante: estou usando Twitter Bootstrap, portanto tudo está com box-sizing: border-box.

A dificuldade é a seguinte: tenho um elemento com posicionamento absoluto. Eu quero que a largura dele seja igual ao do elemento pai:

div.elemento-filho {
    position: absolute;
    width: 100%;
}

Isso quase funciona. O meu problema é que o elemento está ficando mais largo do que o pai, porque o width incluiu as margens (margin) do elemento pai.

div.elemento-pai {
    width: 180px;
    margin: 0px 15px;
}

No caso, eu gostaria que a largura do elemento filho não considerasse as margens, ou seja, que ficasse medindo 150px ao invés de 180px.

Eu não posso fixar o width do elemento-filho, pois ele tem que funcionar para pais de larguras diferentes.

Tem como conseguir isso? De que jeito?

1
  • Sem o position: absolute, parece já funcionar. Com o position: absolute, fica com muito mais que a diferença das margens. jsfiddle.net/ypdtY
    – luiscubal
    Commented 11/03/2014 às 16:09

1 Resposta 1

2

Neste caso é recomendado que utilize o position:relative no elemento pai, isso fará com que os elementos filhos utilizem ele como base de calculo.

Exemplo [JSFiddle]:

HTML

<div id="pai">
    <div id="filho">
    </div>
</div>

CSS

#pai{
    width: 180px;
    margin: 0px 15px;
    border:1px solid red;
    position:relative;
    height:10px;
}

#filho{
    position: absolute;
    width: 100%;
    border:1px solid blue;
}

Links que podem ser uteis: w3schools, maujor

1
  • 1
    Não é que resolveu?! Só agora com sua resposta que parei para pensar, e realmente faz sentido. Já fiz isso para ajustar a posição de um elemento filho, várias vezes. Porém, não me passou pela cabeça que pudesse afetar a largura. Eu sabia que um elemento com position: absolute se baseia no primeiro ancestral com position definido para determinar seu posicionamento... agora aprendi que ele baseia outros atributos além do posicionamento nesse mesmo ancestral.
    – J. Bruni
    Commented 11/03/2014 às 16:33

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 .