css - 如何将div高度设置为 "100%"替代？

Question

我必须创建一个具有纸质纹理和圆 Angular 的 div。当里面的内容增长时，这个 div 应该随之增长，而不是破坏 bg..

为此，我用内容创建了主 div，并使其重复 bg 的中心并将高度设置为自动。我用纹理和圆 Angular 为它的顶部和底部制作了一个 div。我使用了相对于内容 div 的绝对定位，所以当它增长时，底部 bg 将始终低于内容 div。

一切看起来都不错，但是，顶部和底部的 div 覆盖了内容 div。我可以通过在内容 div 的顶部和底部留一个大间隙来解决这个问题，但是有这么大的间隙看起来很奇怪……而且不合适。

对此有什么想法吗？

Answer 1

尝试在内容 div 的顶部和底部添加边距(即 margin: 20px 0 30px 0; 其中 20 是顶部 div 的高度，30 是底部高度分区)。另外，你不能把三个 div 放在一个容器中，然后将它们相对定位，一个堆叠在另一个上吗？

例子:

<div id="container">
  <div id="top"></div>
  <div id="content"></div>
  <div id="bottom"></div>
</div>