I am currently working on a React application that consists of a header, container, and footer. To add animation to the route loading process, I had to apply position: absolute to the container section of the page.
Within the container, there is a row with 2 columns - one for the menu and the other for the page content. However, the issue arises when the second column, which has a position: absolute, causes the footer to go underneath the taller column.
Is there a method to ensure that both columns within the row have the same height? The application is built using Bootstrap 4, so any alternative suggestions are welcome.
<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.
Edit: CSS:
.page {
position: absolute;
left: 0;
right: 0;
}
All other classes are Bootstrap.
You can see the issue if you can log in to the below app with any email and any password.
As in the picture below, the footer overlaps the content. Footer sits just below the menu column as the content column is given a position absolute.