我有一个div,我希望最大化,在父母的基础上100vh.
问题是我有两个pdiv,它们也可以根据窗口的宽度改变它们的高度,从而导致不同的大小.
现在,快速和肮脏的解决方案可能只是运行一个jQuery片段检测母体的大小div以及p基于这些div,并设置div的高度上运行的功能doc.ready和window.onresize.
但这感觉不必要,我想知道是否有一个更简洁的解决方案只使用我不知道的CSS？
我已经在下面设置了一个简化但不起作用的问题版本,看看你是否能比我所指的更清楚.
任何提示都会很棒,谢谢!
*{
margin: 0;
padding: 0;
font-family: Arial, san-serif;
}
#parent{
height: 100vh;
background: lightblue;
}
p{
font-size: 40px;
background: yellow;
}
#p1{
top: 0;
}
#p2{
bottom: 0;
position: absolute;
}
div{
background-color: red;
height: 100%;
}<div id="parent">
<p id="p1">Long block that only appears on the top</p>
<div>Maximising Div</div>
<p id="p2">Long block that only appears on the bottom</p>
</div>