Using Bootstrap 4 to position the footer below all other contents

I have a React app where I have a header, container and footer. For animation purpose of route loading, I have to use position: absolute on the page rendering part of the container.

The container has a row and 2 columns. One for menu and other is the place where pages are rendered.

Now the problem is since Container second column is position: absolute footer goes below to the highest column.

Is there any way to make both columns inside row to have the same height? I am using Bootstrap 4.Any other suggestion is appreciated.

<div class="row">
 <div class="col-4">

 <div class="col-8"> //This is positioned absolute
  <div class="page"><div> // class that applies position
<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.

enter image description here

2 answers

  • answered 2018-11-20 08:35 Carol McKay


  • answered 2018-11-20 08:43 Navtosh Adhikari

    You should use table as below example:

    .table-row{display: table; table-layout: fixed; }
    .table-col{display: table-cell; float: none; vertical-align: top; } 
      <div class="row"> 
        <div class="table-row"> 
          <div class="col-4 table-col"> </div> 
          <div class="col-8 table-col"> //This is positioned absolute ......