使 <div> 元素填充另一个 <div> 元素[重复]

Question

我面临以下问题： 我正在尝试使 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>

Answer 1

您可以使用 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;           
}

DEMO

Answer 2

您可以使用以下样式：

#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;           
}

Example

但这会给你一个 20px 的边距围绕盒子 - 如果你希望你的内部盒子保持在 90% 的宽度，你可以走绝对定位路线：

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

Example

Answer 3

你需要使用display: table;display: table-row;

#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;           
}

Answer 4

#boundaries
{
    position: absolute;
    background: black;
    height: 90%;
    width: 95%;
}

#top
{
    position: relative;
    height: 50px;
    width: 90%;
    margin: 20px;
    background: yellow;
}

#bot
{
    position: relative;
    height: 100%;
    width: 100%;
    background: red;
}

像这样？

http://jsfiddle.net/P2898/11/

Answer 5

绝对定位的实现对我来说似乎很简单：

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

这个 div 是绝对定位的，然后设置顶部，以便它清除顶部 div，bottom: 0px; 强制它的高度。

小提琴：http://jsfiddle.net/n2EYp/