什么是使父母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垂直的最好方法？ （纠正我，如果我错了，但这似乎不是水平填充/边界的问题）

我最好的想法是添加填充/边界/边距的填充到母公司使用像SASS这样的东西来生成实际的CSS使得它稍微更可口，但仍然看起来像是一个非常不洁的解决方案。有没有更好的办法？

谢谢！

（作为一个方面说明，当我做了的jsfiddle例子，我注意到右边界缺少对孩子的div。这只是用的jsfiddle什么侥幸？）

Answer 1

如果你摆脱那些display: inline;的它会像魅力一样工作。