Html 制造<；部门>；元素填充另一个<；部门>；要素

我面临以下问题： 我试图使一个div元素适合另一个div元素中的剩余空间。 为了您的方便，我附上了JSFIDLE

见：

在本例中，您可以看到红方块在黑方块的外面（因为我使用了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>

顶部
机器人程序

您需要使用

显示：表格
显示：表格行

#boundaries
{
    position: absolute;
    background: black;
    height: 90%;
    width: 95%;
    display:table;
    border-spacing:20px;
}

#top
{
    display:table-row;
    height: 50px;
    background: yellow;
}

#bot
{
    display:table-row;
    background: red;           
}

您需要使用
display:table
显示：表格行

#boundaries
{
    position: absolute;
    background: black;
    height: 90%;
    width: 95%;
    display:table;
    border-spacing:20px;
}

#top
{
    display:table-row;
    height: 50px;
    background: yellow;
}

#bot
{
    display:table-row;
    background: red;           
}

您可以使用CSS3，以便可以执行计算来确定CSS高度

因此，在您的示例中，您希望红方块的
高度
等于黑色方块高度（100%）减去黄色方块的高度（50px）和填充（20px+20px）

或者你可以根据自己的需要调整高度

尝试：

您可以使用CSS3，以便执行计算以确定CSS高度

因此，在您的示例中，您希望红方块的
高度
等于黑色方块高度（100%）减去黄色方块的高度（50px）和填充（20px+20px）

或者你可以根据自己的需要调整高度

尝试：


像这样


像这样

对我来说，具有绝对定位的实现似乎足够简单：

/* top and boundaries remain the same. */
#bot
{
    position: absolute;
    margin: 20px;
    bottom: 0;
    top: 70px;
    width: 90%;
    background: red;
}

该div绝对定位，然后设置顶部，以便清除顶部div，并
bottom:0px强制它的高度

Fiddle:
对我来说，具有绝对定位的实现似乎足够简单：

/* top and boundaries remain the same. */
#bot
{
    position: absolute;
    margin: 20px;
    bottom: 0;
    top: 70px;
    width: 90%;
    background: red;
}

该div绝对定位，然后设置顶部，以便清除顶部div，并
bottom:0px强制它的高度

小提琴：
您可以使用以下风格：

#boundaries
{
    position: absolute;
    background: black;
    height: 90%;
    width: 95%;
    display:table;
    border-spacing:20px;
}

#top
{
    display:table-row;
    height: 50px;
    background: yellow;
}

#bot
{
    display:table-row;
    background: red;           
}


但这将给你一个20px的利润率，所有的盒子-如果你想让你的内部盒子保持在90%的宽度，你可以走绝对定位路线：

#bot
{
    position: absolute;
    top:90px;
    bottom:20px;
    left:20px;
    width: 90%;
    background: red;           
}

您可以使用以下样式：

#boundaries
{
    position: absolute;
    background: black;
    height: 90%;
    width: 95%;
    display:table;
    border-spacing:20px;
}

#top
{
    display:table-row;
    height: 50px;
    background: yellow;
}

#bot
{
    display:table-row;
    background: red;           
}


但这将给你一个20px的利润率，所有的盒子-如果你想让你的内部盒子保持在90%的宽度，你可以走绝对定位路线：

#bot
{
    position: absolute;
    top:90px;
    bottom:20px;
    left:20px;
    width: 90%;
    background: red;           
}

您可以使用或@Pete，您可以将其添加为答案。您可以使用或@Pete，您可以将其添加为答案。这看起来不错，谢谢！这看起来不错，谢谢！不，对不起，红色方块必须在黑色方块里面是吗？不是：乔纳森。你没有发布与我相同的代码#机器人缺失宽度：100%；当然，将红色方块的宽度设置为90%表示黑色方块未完全位于红色方块下方。。。我想要的是红方块完全在黑方块里。不，对不起，红方块必须在黑方块里面，是吗？不是：乔纳森。你没有发布与我相同的代码#机器人缺失宽度：100%；当然，将红色方块的宽度设置为90%表示黑色方块未完全位于红色方块下方。。。我想要的是，红方块完全在黑方块中。这是展示桌的好选择。谢谢很好的替代显示表。谢谢很抱歉，没有说明“瘦”，但位置必须保持相对，谢谢您的时间！很抱歉，没有说明“瘦”，但位置必须保持相对，谢谢您的时间！