Footer Rises up in Smaller Screens


I’ve a html page wherein I display a table with data from the database along with a footer at the bottom of the page.

The problem is that with smaller screens the footer, instead of being at the bottom, goes upwards and thus overlaps and hides a portion of the display data.

A sample screen is created in the below codepen URL. (Please check for smaller screens)


Request you to please guide me on this.

Removing the height: 60em; entity of the .row class in the css part of the code did the trick. Alternatively, height: auto; also solves the problem.