什么是使父div高度反映子div的填充/边界/边距的好方法？

Question

背景

我有以下HTML代码：

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

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

如果子div没有填充或边框，这可以正常工作。但是，正如在this JSFiddle example中展示的那样，如果孩子有填充或边框，它会扩展到父div的底部（注意渲染的页面是可滚动的，而且底部下方的子div还有其他内容。页）。

问题

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

我最好的想法是将填充的填充/边框/边距的总和添加到父div。使用像SASS这样的东西来生成实际的css会让它更加可口，但仍然看起来像是一个非常不洁净的解决方案。还有更好的方法吗？

谢谢！

（作为旁注，当我创建JSFiddle示例时，我注意到子div上缺少右边框。这只是一个带有JSFiddle的侥幸吗？）

Answer 1

如果你摆脱那些display: inline;，那它就像魅力一样。