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