css - 使父 div 高度反射(reflect)子 div 的填充/边框/边距的好方法是什么？

Question

背景

我有以下 html 代码:

<div id="parent">
    <div id="child">
        I'm the child!
    </div>
</div>

我希望父 div 相对于页面底部定位，就像 css 属性 position: absolute, bottom: 0px 一样。

如果子 div(s) 没有填充或边框，这工作正常。然而，如 this JSFiddle example 中所示，如果子元素有填充或边框，它会扩展到父 div 的底部之外(请注意呈现的页面是可滚动的，并且页面底部下方的子 div 中有其他内容)。

问题

确保父 div 在垂直方向上完全包含子 div 的最佳方法是什么？ (如果我错了请纠正我，但这似乎不是水平填充/边框的问题)

我最好的想法是将 padding/border/margin 的总和添加到父 div 的 padding 中。使用类似 SASS 的东西来生成实际的 css 使这稍微更容易接受，但看起来仍然是一个非常不干净的解决方案。有没有更好的办法？

谢谢!

(作为旁注，当我制作 JSFiddle 示例时，我注意到子 div 上缺少右边框。这只是 JSFiddle 的侥幸还是什么？)

Answer 1

如果你去掉那些 display: inline;，它会像一个魅力一样工作。