6

How can I increase the height of the parent element which has relative position based on child elements height which has absolute position.

In my below example height of the .parent element is showing as 0px

PS: I do not want to use any script

Expected:

enter image description here

What I am getting:

enter image description here

jsFiddle

HTML:

<div class="parent">
    <div class="child" style="top:20px;">Hello</div>
    <div class="child" style="top:40px;">Some content</div>
    <div class="child" style="top:60px;">Some more content</div>
</div>

CSS:

.parent{position:relative;background:green;height:100%;border:1px solid #000000;width:250px;}
.child{position:absolute;}
AKX
  • 152,115
  • 15
  • 115
  • 172
Reddy
  • 1,477
  • 29
  • 79
  • 1
    Does this answer your question? [Make absolute positioned div expand parent div height](https://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height) – aerial Nov 18 '21 at 08:05
  • 1
    Absolute elements are out of the flow of the document, so they won't extend the parent. Why do you use absolute here anyway? – Ania Kowalska Nov 18 '21 at 09:13
  • I am using this for drag and drop functionality inside application. while getting the output I am having the problem if parent div has background color, border etc... – Reddy Nov 18 '21 at 09:14
  • @aerial301, tried all the options from above example. None of the options are working in my case :( – Reddy Nov 18 '21 at 09:15
  • 1
    So you need to set a fixed parent's height if you want to use children with absolute position. There's no situation where absolute child will extend the parent, because it's out of the flow, you need to think about them separately if you set absolute position – Ania Kowalska Nov 18 '21 at 09:29

2 Answers2

2

This snippet gives you the look you want using CSS only.

It does this by making a pseudo element on the last child set a green background going a long way up, and making a pseudo element on the first child overwrite the bit that is above the overall element so it looks as though it isn't there.

The border is similarly hacked-in using the pseudo elements.

enter image description here

.parent {
  position: relative;
  width: 250px;
}

.child,
.child::before,
.child::after {
  box-sizing: border-box;
}

.child {
  position: absolute;
}

.child:first-child::before {
  content: '';
  position: absolute;
  bottom: 1em;
  background-color: white;
  width: 250px;
  height: 100vh;
  z-index: -1;
  border-bottom: 1px solid #000000;
}

.child:last-child::before {
  content: '';
  position: absolute;
  bottom: 0;
  background-color: green;
  width: 250px;
  height: 100vh;
  border: 1px solid #000000;
  border-top-width: 0;
  z-index: -2;
}
<div class="parent">
  <div class="child" style="top:20px;">Hello</div>
  <div class="child" style="top:40px;">Some content</div>
  <div class="child" style="top:60px;">Some more content</div>
</div>

What it does not do, and cannot do, is set the height of the parent. And there is an assumption that the background above the parent is white (it could have any color built in of course but it's not totally generalisable - more an exercise).

A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • @A Haworth, Thanks for the anwer, but it is not working as expected. 1.) Getting extra space in the top of parent which you have covered with background color white. 2.) I do not have control for child element to give dynamic bg color (green). :( – Reddy Nov 18 '21 at 10:54
  • The child element hasn't been given a background color so I'm a bit lost as to what that problem is. – A Haworth Nov 18 '21 at 10:57
1

change height:100% to height:100px or as much as you want, in parent class

because absolute position hasn't any height you should define height for parent.

.parent{
    position:relative;
    background:green;
    height:100px;
    border:1px solid #000000;
    width:250px;
 }
kian
  • 1,449
  • 2
  • 13
  • 21
  • Sorry, height should increase dynamically based on child's position. That is where I am struck :( – Reddy Nov 18 '21 at 10:56