將全高絕對元素定位在相對一個裏面

請幫我解決這個任務。我們有3個div區塊。第一個div的高度設置爲100px（但在現實世界中它是動態值）。第二塊有固定的高度，並有另一塊作爲孩子。子塊應該有高度向下延伸到屏幕底部。但由於我們的第二塊是相對的，底部：0將意味着第二塊的底部。這種情況下的最佳做法是什麼，請純粹使用CSS？將全高絕對元素定位在相對一個裏面

body > div { height: 100px; } 
 

 
.first { background: lightblue; } 
 

 
.second { 
 
    background: lightgreen; 
 
    position: relative; 
 
} 
 

 
.second div { 
 
    position: absolute; 
 
    background: pink; 
 
    width: 50%; 
 
    height: 200px; 
 
    top: 100px; 
 
}

<div class="first">The height of the block may vary greately.</div> 
 
<div class="second"> 
 
    <div>This DIV should take whole free space to the bottom of the screen.</div> 
 
</div>

UPD：

我可以通過纏繞第二個div成額外的div達到的效果（寬度位置的絕對和底部：0）和具有透明背景離開它，但隨後靜態「背後的內容」變得無法使用。這裏是an example。

來源

2017-01-12 Mike

哪個div應該佔用剩餘空間？第二個div或第二個div的孩子？孩子的身高：200px。我認爲第二將採取？ – jmag

@jmag孩子應該有剩餘的空間。 200px是一個隨機數字。 – Mike

爲什麼你不能在同一級別擁有3個div，而不是嵌套？ – Stickers

這是基於您的更新小提琴，因爲它不是說清楚你想達到什麼樣的，但你提到的這個例子很接近，我做你的鏈接是以上z-index所以它的可點擊：

Check external Fiddle, embedded seems to break bottom

來源

2017-01-12 18:24:17 Syden

你可以在這裏檢查：https：//jsfiddle.net/Syden/n725s1nq/1/，因爲片段混亂了底部。 – Syden

謝謝你，會嘗試在我的項目中使用它。是的想法是，第二個div是一個菜單，粉紅色塊是某種下拉菜單。該下拉菜單需要觸及屏幕底部。但第二塊從頂部分開一塊額外的塊。似乎我需要設置位置：相對於整個頁面內容。由於第二個div幾乎是全屏疊加。 – Mike

body > div { height: 100px; } 
 

 
.first { background: lightblue; } 
 

 
.second { 
 
    background-color: lightgreen; 
 
    top: 100px; 
 
} 
 

 
.second >div { 
 
    background: pink; 
 
    width: 50%; 
 
    height: 100%; 
 
}

<div class="first">The height of the block may vary greately.</div> 
 
<div class="second"> 
 
    <div>This DIV should take whole free space to the bottom of the screen.</div> 
 
</div>

來源

2017-01-12 18:23:23 jmag

我只是儘量避免絕對。 – jmag

謝謝你的時間和精力，但我很抱歉，這不是我需要的。 – Mike

將全高絕對元素定位在相對一個裏面

回答

相關問題