Question

我有一个基本的HTML页面，其中包含一个带内容的容器，底部有一个子元素，没有像这样的设置高度：

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

现在，parent的大小为500px中的height。

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

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

我不知道这是否重要，但我不使用绝对/亲戚。我正在使用默认显示。

旁注：

我会欢迎一个纯CSS解决方案if与JS相比它更优雅而不是hacky，但我找不到CSS属性来执行此操作。

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

N：

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

所以.child身高是100％（他适合它的内容）.parent身高是100％（他适合它的内容）所以没有身高设置为{ {1}} .parent将始终触底。如果.child高度设置为大于100％（5000px示例），则需要将.parent（绝对到底部）和＆amp; .child（亲戚，作为祖先的位置）。

＆＃13;

.parent

＆＃13;

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;
}

＆＃13;

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

2 个答案: