將div的邊距保持在100％的高度

Question

我頁面中的最后祖先div需要在所有四個面上都留有邊距，以使其具有面板效果。 這是我的代碼：
CSS：

html, body {
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
}
#bibletree {
width: 20%;
float: left;
height: 100%;
}
.inner {  /*this is the div that I need a margin around, so it is by 10px of the #bibletree div on all sides, including the bottom.*/
overflow: auto;
}

HTML：

<div id="wrapper">
<div id="bibletree">
<div class="inner">my content here, both short and long</div>
</div>
</div>

您可能已經猜到了，這里發生的事情比寫的要多得多。 我有幾個帶有div的列，所有這些列都需要此裕量來實現.inner div上的面板效果。 謝謝你的幫助。

順便說一句，我嘗試了絕對定位，即使我將父級設置為position: relative ，它也只能基於窗口而不是父元素進行position: relative 。

Answer 1

如果將.inner設置為width 100％並添加邊距，則其寬度將比其容器寬。 您可以設置填充或邊框。 例如，您可以添加10px的白色或透明邊框。

另一種選擇是使#bibletree位置相對，然后使.inner位置為絕對，並指定上，下，右和左：

.inner {
    bottom: 10px;
    top: 10px;
    left: 10px;
    right: 10px;
    position: absolute;
}

這將使其尺寸與#bibletree相同，每邊減10px。

Answer 2

保證金：10px工作正常嗎？ 您不需要指定內部div的寬度，因為div已經具有塊選項。 檢查這里更新的演示http://jsfiddle.net/QShRZ/5/