使用内容框来抵消高度

Question

作为默认的盒子大小调整模式到目前为止所做的一切都让我感到烦恼。现在我认为我发现它很好用，但我无法让它显示出来。检查

#container {
  width:200px;
  height:200px;
  position:relative;
}

#textbar {
  position:absolute;
  left:0; right:0; bottom:0;
  height:20px;
  background-color:rgba(0,255,0,0.5);
}

#filler {
  height:100%;
  margin-bottom:20px;
  box-sizing:content-box;
  background-color:rgba(255,0,0,0.5);
}

<div id="container">
  <div id="filler"></div>
  <div id="textbar">here is text</div>
</div>

所以我的想法是文本栏应该从容器的底部取20px，填充物应该采取其余的。我认为，因为内容框被描述为在其总宽度/高度中包括边距和填充，它将减去那些20px我给它的保证金从100％实际上是100％ - 20px但是没有这样的运气，它仍然覆盖了整个容器和文本栏下方。

为什么？我还能怎么做呢？

PS！不希望因兼容性原因使用calc（）。

Answer 1

由于您已经在文本框中使用position: absolute;，我只需执行以下操作。

更改：

#filler {
  height:100%;
  margin-bottom:20px;
  box-sizing:content-box;
  background-color:rgba(255,0,0,0.5);
}

要：

#filler {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:20px;
  background-color:rgba(255,0,0,0.5);
}

Answer 2

  

我认为，因为内容框被描述为包括保证金和   填充总宽度/高度

没有。使用box-sizing: content-box时，sys_goal_simplification/2和width的值仅包含content box。它们不包括填充，边框或边距。

  

要实现您的目标，您可以使用height填充而不是边距。

＆＃13;

＆＃13;

border-box

＆＃13;

#container {
  width: 200px;
  height: 200px;
  position: relative;
}
#textbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  background-color: rgba(0, 255, 0, 0.5);
}
#filler {
  height: 100%;
  padding-bottom: 20px;
  box-sizing: border-box;
  background-color: rgba(255, 0, 0, 0.5);
}

＆＃13;

＆＃13;

＆＃13;

现代替代品将是<div id="container"> <div id="filler"></div> <div id="textbar">here is text</div> </div>或flexbox。