Question

我必须创建一个具有纸质纹理的div，带有圆角。当内部的内容增长时，这个div应该随之增长而不会破坏bg ..

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

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

围绕这个想法？

Answer 1

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

示例：

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

Answer 2

如果不查看代码，很难说，但我认为通过在主div中添加顶部和底部填充（顶部和底部部分的大小）可以轻松解决问题。

编辑：另一种方法是将您的内容放入主div中的另一个div并放弃绝对定位。只需将所有三个div一个接一个地放入，然后使用negative margins将内容拉到顶部div上，并为底部边框执行类似操作。

Answer 3

（根据CSS spec您实际上不需要.text div，您可以将.top和.bottom设置为z-index: -1和{{1} } .container，但我不会依赖所有正确实现该细节的浏览器。）

Answer 4

你可以通过定位来做到这一点：

div.paperTexture {
    position: absolute;
    top: 0px;
    bottom: 0px;
}

如果您需要div占据视口减去Xpx的100％，也可以正常工作。只需将顶部或底部设置为Xpx。