How to set the height of a div container having absolute positioned element

Question

So basically I have a parent div element containing just one child div element. Now I want to set the position of child div to absolute (for animation / page-transition effect). But on doing so, height of parent div element gets set to 0 which changes the whole layout which isn't desired.

How do I fix this to set height of parent div element to that of height of absolute positioned child div element

Here's how my that block of code looks

HTML

<div class='parent'>
  <div class='child'></div>
</div>

CSS

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
}

Answer 1

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.

Answer 2

One way you could do this is by setting a variable in CSS and using the variable on both the parent and child elements height and width.

html {
  --height: 100px;
  --width: 200px;
}

.parent {
  position: relative;
  border: 1px solid black;
  height: var(--height);
  width: var(--width);
}
.child {
  position: absolute;
  height: var(--height);
  width: var(--width);
  background: red;
  top: 0;
}

<div class='parent'>
  <div class='child'></div>
</div>

Another would be to use javascript to set the property of the parents width and height to that of the child elements.

const par = document.querySelector('.parent');
const child = document.querySelector('.child');

const getSetStyles = (p, c, arr) => {
  const styleArr = {};
  arr.map( a => styleArr[a] = getComputedStyle(c).getPropertyValue(a) );
  Object.entries(styleArr).map( sArr => par.style.setProperty(sArr[0], `${sArr[1]}`) );
}

getSetStyles(par, child, ['width', 'height'])

html {
  --height: 100px;
  --width: 200px;
}

.parent {
  position: relative;
  border: 2px solid black;
}

.child {
  position: absolute;
  height: var(--height);
  width: var(--width);
  background: red;
  top: 0;
}

<div class="parent">
  <div class="child"></div>
</div>

Answer 3

I don't know if I have followed your question correctly, but please set a height for the parent then set the height of child to 100%

.parent {
    position: relative;
    height: 100px;
    width: 100px;
  }
  .child {
    position: absolute;
    top: 0;    
    height: 100%;
    width: 100%;
  }