Father Height Element and Sons Position Absolute Elements

Question

I have a div - position:relative. And inside that div I have several divs- position:absolute.

Thus the height of div parent does not work automatically.

I want the height automatically adjust to the positioning of the absolute elements. I’m imagining that you can’t do it yourself.

I have to determine a height fixed ? There is some fix to solve this ?

I’m wearing LESS, guys. LESS!

.mockup{
    padding-bottom: 70px;
    display: block;
    position: relative;
    overflow: auto;
    height: 270px;
    img{
        position: absolute;
        top: 0;
        left: 0;
     }
}

Answer 1

Got some fix to fix it?

1. With pure CSS, NAY. Who says that are the Mozilla Lords, in their documentation:

   ...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.

   In a free translation of the part that interests us: an element that is positioned absolutely is removed from the flow and nay takes up space when other elements are placed.

   This means that, for all intents and purposes, an absolutely positioned element does not exist for its parent in terms of defining height or width of the latter, so its dimensions will not alter the dimensions of other elements above it. overflow: auto and things like that won’t work.

2. With JS? YES.

   As you well asked, this is a fix, since you are trying to achieve a goal with things that were not made for such.

   I made a fiddle to demonstrate the "technique". The idea is basically to add the size of the items within the div father, and assign the result as height of this div.

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

   In my fiddle, the items are called block, to make things a little easier. If you add or remove .blockhtml s, do not forget to increase or decrease the variable $total in the SCSS in agreement, so that the css compiled does not generate problems. Again, this is a hack. You will need to tailor things to your code. If you are working with box-sizing: border-box, for example, you will need to take into account the size of the edges in calculating the heights.

Answer 2

Your css is wrong, you can’t put one element inside the other as you put it, it should be like this:

.mockup{
    padding-bottom: 70px;
    display: block;
    position: relative;
    overflow: auto;
    height: 270px;
}
.mockup img{
    position: absolute;
    top: 0;
    left: 0;
}