Expand height of div to reach bottom of container from it's initial position

Question

I have a basic HTML page set up with a container with content and a child element at the bottom with no set height like this:

<div id="parent">
      ^
      |
      |    //other elements here of variable height depending on content output
      | 
      |
      v
   <div id="child"></div>
</div>

Now the parent has a size of lets say 500px in height .

What i want to do, is to get the current position of child (which currently has not got a set height) relative to the container, and then calculate the height needed to expand the child to the bottom of the parent.

The issue is how do i get the current position for top: of child relative to parent? That way I can calculate how much height is required to reach the bottom of the parent and then use myEl.style.height = height+'px';

I don't know if this matters but i am not using position absolute/relative. I am using default display.

Side note:

I would welcome a pure CSS solution if it is more elegant and not hacky compared to JS , but i could not find a CSS property to do this.

Answer 1

 html, body { height:100%; } #parent { position:relative; height:auto; } #child { position:relative; height:100%; background:#ccc; } 

 <div id="parent">Parent div <p>► fix grammatical or spelling errors ► clarify meaning without changing it ► correct minor mistakes ► add related resources or links ► always respect the original author</p> <p>► fix grammatical or spelling errors ► clarify meaning without changing it ► correct minor mistakes ► add related resources or links ► always respect the original author</p> <p>► fix grammatical or spelling errors ► clarify meaning without changing it ► correct minor mistakes ► add related resources or links ► always respect the original author</p> <p>► fix grammatical or spelling errors ► clarify meaning without changing it ► correct minor mistakes ► add related resources or links ► always respect the original author</p> <div id="child">Child div - Some text</div> </div> 

Answer 2

Normal flow: i think this is what you mean. i'm sorry i do not understand your question very well.

N:

a block-level element height is, if not set, designed to fit hes children

so .child height is 100% (he fit it's content) .parent height is 100% (he fit it's content) so is no height is set to .parent the .child will always hit bottom. If .parent height is set greater than 100% (5000px example) you need to position both .child (absolute to hit bottom) & .parent (relative, to be an position ancestor).

 div.spaceTruck { outline: 1px solid green; background-color: lime; } div.spaceTruck > span { color: white; background-color: black; display: block; } div.spaceTruck > div { position: relative; font-size: 40px; padding: 50px; background-color: red; } 

 <div class="spaceTruck"> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <span>Dark content</span> <div> spaceeeetruckking!!! </div> </div>