什麼是使父母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;的它會像魅力一樣工作。