Make absolute positioned div expand parent div height

Question

As you can see in the CSS below, I want child2 to position itself before child1. This is because the site I'm currently developing should also work on mobile devices, on which the child2 should be at the bottom, as it contains the navigation which I want below the content on the mobile devices. - Why not 2 masterpages? This is the only 2 divs which are repositioned in the entire HTML, so 2 masterpages for this minor change is an overkill.

HTML:

<div id="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

child2 has dynamic height, as different subsites could have more or less navigation items.

I know that absolute positioned elements are removed from the flow, thus ignored by other elements.
I tried setting overflow:hidden; on the parent div, but that didn't help, neither does the clearfix.

My last resort will be JavaScript to reposition the two divs accordingly, but for now I'll try and see if there exist a non-JavaScript way of doing this.

Solution 1

You answered the question by yourself: "I know that absolute positioned elements are removed from the flow, thus ignored by other elements." So you can't set the parents height according to an absolutely positioned element.

You either use fixed heights or you need to involve JS.

Solution 2

Although stretching to elements with position: absolute is not possible, there are often solutions where you can avoid the absolute positioning while obtaining the same effect. Look at this fiddle that solves the problem in your particular case http://jsfiddle.net/gS9q7/

The trick is to reverse element order by floating both elements, the first to the right, the second to the left, so the second appears first.

.child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

Finally, add a clearfix to the parent and you're done (see the fiddle for the complete solution).

Generally, as long as the element with absolute position is positioned at the top of the parent element, chances are good that you find a workaround by floating the element.

Solution 3

There is a quite simple way to solve this.

You just have to duplicate the content of child1 and child2 in relative divs with display:none in parent div. Say child1_1 and child2_2. Put child2_2 on top and child1_1 at the bottom.

When your jquery (or whatever) calls the absolute div, just set the according relative div (child1_1 or child2_2) with display:block AND visibility:hidden. The relative child will still be invisible but will make parent's div higher.

Solution 4

Feeela is right but you can get a parent div contracting or expanding to a child element if you reverse your div positioning like this:

.parent {
    position: absolute;
    /* position it in the browser using the `left`, `top` and `margin` 
       attributes */
}

.child {
    position: relative;
    height: 100%;
    width: 100%;

    overflow: hidden;
    /* to pad or move it around using `left` and `top` inside the parent */
}

This should work for you.

Solution 5

This question was asked in 2012 before flexbox. The correct way to solve this problem using modern CSS is with a media query and a flex column reversal for mobile devices. No absolute positioning is needed.

https://jsfiddle.net/tnhsaesop/vjftq198/3/

HTML:

<div class="parent">
  <div style="background-color:lightgrey;">
    <p>
      I stay on top on desktop and I'm on bottom on mobile
    </p>
  </div>
  <div style="background-color:grey;">
    <p>
      I stay on bottom on desktop and I'm on top on mobile
    </p>
  </div>
</div>

CSS:

.parent {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .parent {
    flex-direction: column-reverse;
  }
}

View more solutions

Comments

[Billy Moat]

I'm not 100% sure but I think you'll probably have to go for a JS solution which works out the height of child2 and moves child1 accordingly.

[fungusanthrax]

This can be done by setting the parent's position to relative and the child to absolute.

[Az.Youness]

See this Workaround maybe it can help.

[JonathanC]

If the parent is relative and the child is absolute and you wish to position the child at the bottom (ie the height of the parent), simply use top:100%.

[Admin]

I'm marking this as it technically is the correct way, though I found another solution to my problem, which is practically to nest the required css on the specific pages which has to differenciate (2 out of 40 at the moment).

[machineaddict]

this will work only if you know the final height of the parent, which you don't

[mschadegg]

This can give some problems with search engine ranking

[edencorbin]

This got me thinking in the right direction. In my case setting display: none on the "size holder" content makes the div not size, however opacity: 0, sizes the div correctly and doesn't require any additional jquery.

[Diogo Garcia]

The way I did was to get two duplicate divs the first one is the visible content with position absolute and the second one is a div with visibility hidden that keeps the parent div with the correct height all works fine =D

[DaniDev]

This answer could benefit from better explanation and direction of the proposed solution.

[Alexander Cherednichenko]

great solution!

[wickywills]

@AlexanderCherednichenko Not really, it misses the point of the question.

[Manoj]

if there's a second child in hack class element with height say 300px and sibling element for parent class height 150px. We still cannot see the new sibling element of parent class

[aderchox]

Just thinking... If it's really out of the flow, how come the left padding of the parent element affects the absolutely positioned child element as well?

[icyNerd]

@user557419 if you found another solution pls put it in the answer

[Eoin]

You could also use order: 2 on the first item if for example there are a lot of options and this specific option is required at the front.

[János]

Hi, I tried put togeter a Javascript in React to adjust parent height, but get stuck, do you have any idea? stackoverflow.com/questions/69498478/…