Использование Bootstrap 4 для позиционирования нижнего колонтитула ниже всего остального содержимого

Question

У меня есть приложение React, в котором есть заголовок, контейнер и нижний колонтитул.Для анимации загрузки маршрута я должен использовать position: absolute на части рендеринга страницы контейнера.

Контейнер содержит строку и 2 столбца.Один для меню, а другой - это место, где отображаются страницы.

Теперь проблема в том, что второй столбец контейнера - это position: absolute нижний колонтитул ниже самого верхнего столбца.

Есть ли способ сделать так, чтобы оба столбца внутри строки имели одинаковую высоту?Я использую Bootstrap 4. Любое другое предложение приветствуется.

<header>..</header>
<div class="row">
 <div class="col-4">

 </div>
 <div class="col-8"> //This is positioned absolute
  <div class="page"><div> // class that applies position
 </div>
</div>
<footer>..<footer> //footer goes below any column whichever has more height.

Редактировать: CSS:

.page {
    position: absolute;
    left: 0;
    right: 0;
}

Все остальные классы являются Bootstrap.

Вы можете увидеть проблему, если сможете войтик приложению ниже с любым адресом электронной почты и паролем.

https://healthrecordstack.now.sh/

Как и на рисунке ниже, нижний колонтитул перекрывает содержимое.Нижний колонтитул расположен чуть ниже столбца меню, поскольку столбцу содержимого присваивается абсолютная позиция.

Answer 1

Вы должны использовать таблицу, как показано ниже:

.table-row{display: table; table-layout: fixed; }
.table-col{display: table-cell; float: none; vertical-align: top; } 

<header>..</header> 
  <div class="row"> 
    <div class="table-row"> 
      <div class="col-4 table-col"> </div> 
      <div class="col-8 table-col"> //This is positioned absolute ...... 
      </div> 
    </div> 
  </div>
<footer>..<footer>

Answer 2

.row
{
  display:flex;
  min-height:80vh;
}

https://css -tricks.com / snippets / css / a-guide-to-flexbox /