Match the height of the parent to the child element - relative and absolute position

Question

As basic as this may seem, I am not able to get this working.

Simply put, I have a parent element - relative position. Then a child element - absolute position.

How can I match the height of the parent, if the child has greater height than the parent. Meaning, how to make the parent expand.

Here is the js fiddle in what I am looking at https://jsfiddle.net/wthwawcv/

<div class="parent">
  dsfsdfsdfsdf<br> 
  hellow .. line 2 <br>
  hello .. line 3
  <div class="child">
    this is the child element to be diaplayed
  </div>
</div>


.parent {
  width:100%;
  background: #ff0000;
  width:200px;
  position: relative;
  overflow: hidden;
}

.child {
  width:40px;
  height:100px;
  background: #ffff00;
  position: absolute;
  right: 0;
  top: 0;
}

This is not possible with pure HTML/CSS if the children are absolute/fixed positioned. Check out this Stack question for a workaround: [Auto height on parent container with absolute/fixed children](http://stackoverflow.com/questions/9061520/auto-height-on-parent-container-with-absolute-fixed-children) — JVE, Apr 18 '16 at 09:30

score 1 · Accepted Answer · answered Apr 18 '16 at 09:37

1

Instead of absolute positioning, you could use float and clearfix hack:

.parent {
  width:100%;
  background: #ff0000;
  width:200px;
  position: relative;
}
.parent:after {
  content: '.';
  color: transparent;
  clear: right;
  overflow: hidden;
  display: block;
  height: 0;
}

.child {
  float: right;
  width:40px;
  background: #ffff00;
}

<div class="parent">
<div class="child">
    this is the child element to be displayed
  </div>
  Child is<br> 
  longer than<br>
  parent content.
</div>
<br>
<div class="parent">
<div class="child">
    child
  </div>
  Child is<br> 
  shorter than<br>
  parent content.
</div>

answered Apr 18 '16 at 09:37

Paul

8,974
3
28
48

Hi.. Thank you for the reply. This is close to what i was looking for. but. how can i use it if the parent has a padding. I still needed the child to cover the entire height of the parent (Hence my use of the absolute position initially). – Archer Apr 18 '16 at 10:09
Add the padding value as a negative margin to your child, of course only to up/right/bottom side. – Paul Apr 18 '16 at 10:10
Yes.. tried exactly that .. but for some reason, the parent becomes too long when the width of the child is 0px. But comes back to normal height, when i do a `display:none;` in hide's css. But then i loose the transition that i am using (to toggle the child window 0px and 30px width on click of another element) – Archer Apr 18 '16 at 10:37
The width of the child will not affect its height, the parent is still cleared for the height. This might be a different problem regarding the transition. – Paul Apr 18 '16 at 11:48

score 0 · Answer 2 · answered Apr 18 '16 at 09:36

If You can use jquery then please add following code in your file and remove height from child class. Here is working FIDDLE DEMO

var min_parent_height = jQuery(".child").height()+"px";
console.log(min_parent_height);
jQuery(".parent").css({'min-height':min_parent_height});

Match the height of the parent to the child element - relative and absolute position

2 Answers2