Javascript 扩展div的高度，使其达到容器底部'；s初始位置

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

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

^
|
|//此处的其他元素根据内容输出具有可变高度
| 
|
v

现在，

父级

在

高度

中的大小为

500px

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

问题是如何获取

child

相对于父项的

top:

的当前位置？这样我就可以计算到达父对象底部需要多少高度，然后使用

myEl.style.height=height+'px'

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

旁注：

如果与
JS
相比，纯
CSS
解决方案更优雅、更不黑客，我会欢迎它，但我找不到CSS属性来实现这一点。

html，正文{
身高：100%；
}
#母公司{
位置：相对位置；
高度：自动；
}
#孩子{
位置：相对位置；
身高：100%；
背景：#ccc；
}
父div
► 修正语法或拼写错误
► 澄清意思而不改变它
► 纠正小错误
► 添加相关资源或链接
► 永远尊重原作者

► 修正语法或拼写错误
► 澄清意思而不改变它
► 纠正小错误
► 添加相关资源或链接
► 永远尊重原作者

► 修正语法或拼写错误
► 澄清意思而不改变它
► 纠正小错误
► 添加相关资源或链接
► 永远尊重原作者

► 修正语法或拼写错误
► 澄清意思而不改变它
► 纠正小错误
► 添加相关资源或链接
► 永远尊重原作者

子div-一些文本

html，正文{
身高：100%；
}
#母公司{
位置：相对位置；
高度：自动；
}
#孩子{
位置：相对位置；
身高：100%；
背景：#ccc；
}
父div
► 修正语法或拼写错误
► 澄清意思而不改变它
► 纠正小错误
► 添加相关资源或链接
► 永远尊重原作者

► 修正语法或拼写错误
► 澄清意思而不改变它
► 纠正小错误
► 添加相关资源或链接
► 永远尊重原作者

► 修正语法或拼写错误
► 澄清意思而不改变它
► 纠正小错误
► 添加相关资源或链接
► 永远尊重原作者

► 修正语法或拼写错误
► 澄清意思而不改变它
► 纠正小错误
► 添加相关资源或链接
► 永远尊重原作者

子div-一些文本
正常流量：我想这就是你的意思。对不起，我不太明白你的问题

N:

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

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


div.spaceTruck{
外形：1px纯绿色；
背景色：石灰；
}
太空卡车>跨度{
颜色：白色；
背景色：黑色；
显示：块；
}
太空卡车>太空舱{
位置：相对位置；
字体大小：40px；
填充：50px；
背景色：红色；
}

暗内容
暗内容
暗内容
暗内容
暗内容
暗内容
暗内容
暗内容
暗内容
暗内容
太空旅行！！！
正常流量：我想这就是你的意思。对不起，我不太明白你的问题

N:

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

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


div.spaceTruck{
外形：1px纯绿色；
背景色：石灰；
}
太空卡车>跨度{
颜色：白色；
背景色：黑色；
显示：块；
}
太空卡车>太空舱{
位置：相对位置；
字体大小：40px；
填充：50px；
背景色：红色；
}

暗内容
暗内容
暗内容
暗内容
暗内容
暗内容
暗内容
暗内容
暗内容
暗内容
太空旅行！！！
#父{位置：相对；}#子{位置：绝对；底部：0px；}..工作正常吗？：）@yjs没有，因为child的高度仍然是零