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。

Answer 1

如果将.inner设置为宽度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/

以100％的高度保持div周围的边距

2 个答案: