Html 使用内容框偏移高度

作为默认的框大小调整模式，到目前为止它所做的一切都让我很恼火。现在我认为我发现了它的一个很好的用途，但我不能让它显化。检查一下

#容器{
宽度：200px；
高度：200px；
位置：相对位置；
}
#文本栏{
位置：绝对位置；
左侧：0；右侧：0；底部：0；
高度：20px；
背景色：rgba（0255,0,0.5）；
}
#填充物{
身高：100%；
边缘底部：20px；
框大小：内容框；
背景色：rgba（255,0,0,0.5）；
}

这里是文本

因为您已经在使用

位置：绝对
更改：

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

致：

我想既然内容框被描述为包括边距和
填充其总宽度/高度

否。
width
和
height
的值仅包括。它们不包括填充物、边框或边距


要实现所需的功能，可以使用带填充而非边距的
边框框


#容器{
宽度：200px；
高度：200px；
位置：相对位置；
}
#文本栏{
位置：绝对位置；
左：0；
右：0；
底部：0；
高度：20px；
背景色：rgba（0,255,0,0.5）；
}
#填充物{
身高：100%；
垫底：20px；
框大小：边框框；
背景色：rgba（255,0,0,0.5）；
}

这里是文本
看看显示器的规格：flex:）也没有flex，我需要我的IE4用户！IE4？！你一定是在开玩笑。我想你之所以想这么做是因为你要处理可变高度的问题，对吗？我能看到的最简单的解决方案是设置位置：绝对；排名：0；右：0；左：0；底部：20px；在#filler上，删除高度、边距和框大小也是不相关的，除非我误解了您的意图。如果不执行OP想要的操作，请参见
textbar上的
bg color
#filler {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:20px;
  background-color:rgba(255,0,0,0.5);
}