CSS重复背景高度和绝对定位

Question

我有一个带有重复图像的容器，我想填充100％的可用高度。 一些内部的div具有：after伪元素，它们的位置绝对正确，因此我可以按需要的方式获得边框。 这导致主容器的重复背景出现问题。

请访问此链接并滚动到页面末尾-http: //www.mariage-graham-audrey.com/static.html

有人可以为此建议一个可能的解决方案吗？

Answer 1

只是一种解决方法，但尝试向布局中添加较大的底部填充，如下所示：

.layout {
  ...
  padding-bottom: 180px;
}

Answer 2

请使用此样式替换布局div的样式。 会工作的

 .layout{ background: white url("/bootstrap/assets/images/pattern.png") 0 0; width: 100%; /* add 100% width*/ margin: 0 auto; padding: 0 0 150px 0; /*change padding with this*/ min-height: 100%; } 

Answer 3

刚看过您的CSS，我认为通过添加此内容，您将可以获得完整的页面背景：

  background: white url("/bootstrap/assets/images/pattern.png") 0 0;
  width: 100%;
  margin: 0 auto;
  padding: 30px 0;
  min-height: 100%;

只需编辑“ width：100％;”即可。