将全高绝对元素定位在相对一个里面

请帮我解决这个任务。我们有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

将全高绝对元素定位在相对一个里面

回答

相关问题