扩展div的高度以从其初始位置到达容器的底部

Question

我有一个基本的HTML页面，其中设置了一个包含内容的容器，并在底部具有一个子元素，没有设置高度，如下所示：

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

现在parent height可以说是500px 。

我想做的是获取相对于容器的child的当前位置（当前尚未设置高度），然后计算将子对象扩展到父对象底部所需的高度。

问题是我如何获得当前的top:职位top: child相对于父母的地位？ 这样，我可以计算出到达父级底部所需的高度，然后使用myEl.style.height = height+'px';

我不知道这是否重要，但我没有使用绝对/相对位置。 我正在使用默认显示。

边注：

if与JS相比，它更优雅，更不客气，我将欢迎使用纯CSS解决方案，但是我找不到CSS属性来执行此操作。

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

正常流程：我认为这就是您的意思。 对不起，我不太了解您的问题。

N：

块级元素的高度（如果未设置）设计为适合孩子

所以.child高度为100％（他适合它的内容） .parent高度为100％（他适合它的内容），所以没有高度设置为.parent的.child总会触底。 如果将.parent高度设置为大于100％（例如5000px），则需要同时定位.child （绝对到达底部）和.parent （相对，作为位置祖先）。

 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>