Father Height Element and Sons Position Absolute Elements

Asked

Viewed 3,930 times

3

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;
     }
}
css less
  • 1

    That one img{ inside .mockup{ Does it work? Or did you mispost here?

  • 2

    Are you using LESS or SASS? If you are, please mention this in the question. Otherwise, see @Orion’s comment.

  • What do you mean o height da div pai não funciona automaticamente? You want the image to be the height of the .mockup?

  • I’m using LESS.

  • @Oeslei, I want the height of div parent fits while moving the absolute elements. I give a top:100px I want the height stay 100px.

  • I have the same problem, but I’ve seen that only with css will not happen even no face... If you can solve until I’m wondering and your get the answer I come here to put.... Anyway the best way is using JS even... Few lines solve...

Show 1 more comment

2 answers

4


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.

  • Got it, Caio. Since the absolute child elements are 'rebels', it makes no difference if I change the height of the Parent element in the nail ? Why do I keep thinking about the positions of the absolute elements. I don’t want these elements to be relative to the body, I want it to be related to that parent element.

  • It depends on how you relate the two. If you put the children with top: 10px, they will always be at 10px distance from the top, regardless of the height of the block. If, on the other hand, you do bottom: 10px, it will be 10px from the fund, regardless of where the fund is, which can change the position total block

3

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;
}

  • I didn’t warn you. I’m programming in LESS. But still, your code didn’t work for what I want. You set a height fixed.

  • 1

    position:absolute will not change the height of the div Dad, what you can do is use float to place the div side by side and increasing the height as a new div is automatically inserted.

  • 1

    I can’t. It has to be Absolute. It’s a mockup, it’s element on top of element...

Browser other questions tagged css less

You are not signed in. Login or sign up in order to post.