неправильное положение нижнего колонтитула из-за высоты: 100%

Question

Я нашел довольно много людей, задающих аналогичный вопрос, но у меня, похоже, другая проблема. Это расположение моего div.

<div class="container-fluid px-0">
  <header>
  </header>

  <div class="content">
    <div class="content-1">
    </div>
    <div class="content-2">
    </div>
    <div class="content-3">
    </div>
  </div>
</div>

Каждый класс, кроме верхнего и нижнего колонтитула, имеет height:100%;, включая &

Класс content-1, content-2, content-3 имеет background-size:cover;, потому что я хочу, чтобы фон был полной страницей.

У меня нет проблем, , пока весь мой контент находится внутри класса "content». Однако теперь я хочу добавить

под классом «content». Таким образом, позиция

должна быть ниже содержимого-3, но вместо этого она появляется ниже содержимого-1. Есть ли способ добавить

, но не внутри класса "content"?

Что я пробовал:

• установить

вposition:absolute; bottom:0; не работает. Проблема сохраняется. Установка overflow:auto для класса "content" установит нижний колонтитул в правильную позицию, но теперь у меня есть две полосы прокрутки.

изображение для визуализации

Answer 1

.content {
   display: inline;
}

Answer 2

Try this 

.content {
    float: left;
    display: block;
    width: 100%;
}

Спасибо