html - 使用内容框来偏移高度

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，而填充器应该占用其余部分。我认为由于内容框被描述为在其总宽度/高度中包括边距和填充，它会从 100% 中减去我给它的边距 20px，实际上是 100% - 20px 但没有这样的运气，它仍然涵盖了整个容器并覆盖文本栏。

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

附言!出于兼容性原因不想使用 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);
}