在高度100％处保持div的边距

我的页面中的最终祖先div在所有四个边上都需要一个边距，以赋予它一个面板效果。这里是我的代码：
CSS：在高度100％处保持div的边距

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>

正如你可能猜到了，有很多更比这里写的是什么回事。我有几列divs，在.inner div上面板效果都需要这个边距。谢谢你的帮助。

顺便说一句，我已经尝试绝对定位，它只基于窗口，而不是父元素，即使我将父母设置为position: relative位置。

来源

2012-09-04 preahkumpii

如果将.inner设置为宽度100％并添加边距，则该宽度将比其容器宽。您可以改为设置填充或边框。例如，您可以添加10px的白色或透明边框。

另一种选择是让相对#bibletree位置，然后进行.inner位置绝对和指定顶部，底部，右侧和左侧：

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

这将使它大小相同#bibletree，减去10px的在每一方面。

来源

2012-09-04 08:33:56 Sjoerd

我做了你提到的第二件事，它根据窗口定位'.inner'，* not * parent。 – preahkumpii

查看@Sjoerd在这里说的内容的工作示例，http://jsfiddle.net/z6UTV/ –

此外，我不能做边界的想法，因为当它溢出时，滚动条就是*内部*边界。 – preahkumpii

保证金：10px是否正常？你不需要指定inner div的宽度，因为div已经有了block选项。检查这里更新的演示http://jsfiddle.net/QShRZ/5/

来源

2012-09-04 08:42:18 Sowmya

是，*但*如果内容超过父级，则底部没有空白。见http://jsfiddle.net/QShRZ/1/ – preahkumpii

检查更新的演示http://jsfiddle.net/QShRZ/5/ – Sowmya

我明白了。但是所有的父母都不能超过窗口高度，这就是为什么我首先将html身高设为100％。 '＃bibletree'不要低于窗口。 – preahkumpii

在高度100％处保持div的边距

回答

相关问题