我面临以下问题：我正在尝试使一个div元素适合另一个div元素中的剩余空间。为了方便起见，我附上了jsfiddle。
参见：http : //jsfiddle.net/P2898/
在此示例中，您可以看到红色正方形位于黑色正方形之外（因为我使用了height：100％并为红色正方形提供了偏移量）。
我如何确保红色方块只是填充黑色方块，而不是超出红色方块？
ps：黄色正方形无法更改（因此必须为50px，无百分比）。
CSS文件：
#boundaries
{
position: absolute;
background: black;
height: 90%;
width: 95%;
}
#top
{
position: relative;
height: 50px;
width: 90%;
margin: 20px;
background: yellow;
}
#bot
{
position: relative;
margin: 20px;
height: 100%;
width: 90%;
background: red;
}
html代码：
<div id="boundaries">
<div id="top">
top
</div>
<div id="bot">
bot
</div>
</div>
您可以使用CSS3，calc()以便您可以执行计算以确定CSS高度。
因此，在您的示例中，您希望红色方块的height高度等于黑色方块的高度（100％）减去黄色方块的高度（50px）和空白（20px + 20px）。
或者，您可以根据需要进行调整并调整高度
尝试：
#bot
{
position: relative;
margin: 20px;
height: -webkit-calc(100% - 90px);
height: -moz-calc(100% - 90px);
height: -o-calc(100% - 90px);
height: calc(100% - 90px);
width: 90%;
background: red;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句