Parent Element Height and Element Children Position Absolute

Question

Parent Element Height and Element Children Position Absolute

Navigation

#1 by (4 votes)
#2 by (3 votes)

3

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

In this way, height of div parent does not work automatically.

I want the height to automatically adjust to the positioning of the absolute elements. I'm wondering if you can not do that yourself.

Do I have to determine a height fixed? Do you have any fix to resolve this?

I'm using LESS, guys. LESS!

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

css less

asked by anonymous 10.06.2015 / 18:26

2 answers

3

Your css is wrong, you can not put one element inside the other as you put it, it should look like this:

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

10.06.2015 / 18:32

How do I create a map with a proximate circumference? [closed] Limit size of a String?

score 4 · Accepted Answer

Are there any fixes to fix this?

With pure CSS, NOT . Who says this is the Mozilla overlords, in their documentation :

In contrast, an element that is positioned 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 an anchor position does not exist, the initial container is used.

In a free translation of the part that interests us: an element that is positioned absolutely is taken out of the flow and does not takes up space when other elements are placed .

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

With JS? SIM .

As you well asked, this is a fix , since you are trying to reach a goal with things that have not been done for it.

I did a fiddle to demonstrate the "technique". The idea is basically to add the size of the items within the% co_of% parent, and assign the result as the 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 div , to make things easier. If you add or remove block s from html, be sure to increase or decrease the variable .block in $total accordingly, so compiled SCSS does not cause problems. Again, this is a hack . You will have to adjust things to your code. If you're working with css , for example, you'll have to take into account the size of the edges in the calculation of heights.