Фоновое изображение из SVG, переполняющих нижний колонтитул

Question

У меня проблема с настройкой фона на одной из моих страниц, он состоит из нескольких позиционированных SVG, а высота страницы не постоянна. Существуют разделы, которые расширяются вниз по мере заполнения формы, и фон продолжает эту страницу вниз. Это вызывает у меня небольшую головную боль, потому что по мере того, как мы продолжаем двигаться вниз по странице, если вся форма не раскрывается, переполнение продолжается и ниже нижнего колонтитула, в результате чего страница выглядит неработающей.

css выглядит так this:

body {
    background: #fcfcfc;
    overflow-x: hidden;
}

svg,
.background {
    position: absolute;
}

.background {
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Хотя разметка имеет такую ​​структуру,

<div x-ng-controller="" class="container">
    <div class="background">...contains absolutely positioned svgs</div>
    <div class="content">...content that sits ontop of background image</div>
</div>
<footer>Loaded separately in java app</footer>

Абсолютное позиционирование, похоже, меня догоняет, и я не могу удержать svgs после конца контроллер, так что он толкает ниже нижнего колонтитула. Любая помощь с благодарностью.

Answer 1

Это может помочь вам. Принять к вашим потребностям. По сути, у вас есть «контейнер», внутри которого вы помещаете «фоны» absolutely. Используйте overflow: hidden; на контейнере и вуаля. По мере роста контента (нажмите «CLICK ME» несколько раз), так и область «контейнера» показывает все больше и больше изображения (независимо от того, является ли это svg или png. Это просто изображение).

var content = "Lorem ipsum dolor sit amet.";

var button = document.querySelector('a');
var contentElement = document.querySelector('.content');

button.addEventListener('click', function(event){
  event.preventDefault();
  contentElement.innerHTML = contentElement.innerHTML + content;
});

.container {
  position: relative;
  border: solid 2px green;
  overflow: hidden;
}
.background {
  position: absolute;
  left: 100px;
  top: 0px;
  background-image: url(https://picsum.photos/200/800);
  width: 200px;
  height: 800px;
  z-index: -1;
}

.content {
  width: 200px;
}

<a href="#">CLICK ME</a>
<div class="container">
    <div class="background"></div>
    <div class="content">Lorem ipsum dolor sit amet.</div>
</div>