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.

<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.

https://healthrecordstack.now.sh/

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

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

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

  • 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; } 
    
    <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>