4

Tenho uma div - position:relative. E dentro dessa div tenho várias divs- position:absolute.

Dessa forma o height da div pai não funciona automaticamente.

Eu quero que o height ajuste automaticamente ao posicionamento dos elementos absolutos. Estou imaginando que não dê pra fazer isso mesmo.

Eu tenho que determinar um height fixo ? Tem algum fix para resolver isso ?

Estou usando LESS, galera. LESS!

.mockup{
    padding-bottom: 70px;
    display: block;
    position: relative;
    overflow: auto;
    height: 270px;
    img{
        position: absolute;
        top: 0;
        left: 0;
     }
}
6
  • 1
    Esse img{ dentro de .mockup{ funciona? Ou você publicou errado aqui?
    – Paulo
    Commented 10/06/2015 às 16:30
  • 2
    Você está usando LESS ou SASS? Se estiver, por favor mencione isso na pergunta. Caso contrário, ver comentário do @Orion.
    – mgibsonbr
    Commented 10/06/2015 às 16:33
  • O que você quer dizer com o height da div pai não funciona automaticamente? Você quer que a imagem fique com a altura do .mockup?
    – Oeslei
    Commented 10/06/2015 às 16:35
  • Estou usando LESS. Commented 10/06/2015 às 16:46
  • @Oeslei, quero que a altura da div pai se ajuste ao passo que movimento os elementos absolutos. Eu eu der um top:100px quero que o height fique 100px. Commented 10/06/2015 às 16:48

2 Respostas 2

4

Tem algum fix pra resolver isso?

  1. Com puro CSS, NÃO. Quem diz isso são os overlords do Mozilla, na sua documentação:

    ...In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.

    Em uma tradução livre da parte que nos interessa: um elemento que é posicionado absolutamente é retirado do flow e não ocupa espaço quando outros elementos são colocados.

    Isto significa que, para todos os efeitos, um elemento absolutamente posicionado não existe para o seu pai, em termos de definição de altura ou largura do último, portanto suas dimensões não vão alterar as dimensões de outros elementos acima dele. overflow: auto e coisas do tipo não vão funcionar.

  2. Com JS? SIM.

    Como você bem perguntou, isso é um fix, uma vez que você está tentando alcançar um objetivo com coisas que não foram feitas para tal.

    Fiz um fiddle pra demonstrar a "técnica". A idéia é basicamente somar o tamanho dos itens dentro da div pai, e atribuir o resultado como altura desta div.

    var blocks = $('.block').length;
    var altura = $('.block').height();
    altura *= blocks;
    $('.mockup').css('height', altura); 
    

    No meu fiddle, os itens chamam-se block, pra facilitar um pouco as coisas. Se você adicionar ou retirar .blocks do html, não se esqueça de aumentar ou diminuir a variável $total no SCSS de acordo, para que o css compilado não gere problemas. Novamente, isso é um hack. Você terá que adequar as coisas ao seu código. Se você estiver trabalhando com box-sizing: border-box, por exemplo, terá que levar em conta o tamanho das bordas no cálculo das alturas.

2
  • Entendi, Caio. Já que os elementos filhos absolutos são 'rebeldes', não faz diferença eu mudar o height do elemento Pai na unha ? Porquê fico pensando nas posições dos elementos absolutos. Não quero que esses elementos fiquem relativos ao body, quero que fique relativo a esse elemento pai. Commented 10/06/2015 às 20:45
  • Depende de como você relacionar os dois. Se você coloca os filhos com top: 10px, eles vão estar sempre à 10px de distância do topo, independente da altura do bloco. Se, por outro lado, você faz bottom: 10px, ele vai estar a 10px do fundo, independente de onde esteja o fundo, o que pode alterar a posição total do bloco Commented 10/06/2015 às 21:40
3

Seu css está errado, não pode colocar um elemento dentro do outro como você colocou, deveria ser assim:

.mockup{
    padding-bottom: 70px;
    display: block;
    position: relative;
    overflow: auto;
    height: 270px;
}
.mockup img{
    position: absolute;
    top: 0;
    left: 0;
}
3
  • Eu não avisei. Estou programando em LESS. Mas mesmo assim, seu código não funcionaram para o que eu quero. Você definiu um height fixo. Commented 10/06/2015 às 16:55
  • 1
    position:absolute não irá alterar a altura da div pai, o que você pode fazer é usar float para colocar as div internas lado a lado e ir aumentando a altura a medida que uma nova div é inserida automaticamente.
    – Paulo
    Commented 10/06/2015 às 17:25
  • 1
    Não posso. Tem que ser absolute. É um mockup, é elemento em cima de elemento... Commented 10/06/2015 às 17:30

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 .