Topic: Footer overlapping content

Rene Verbanec free asked 3 years ago

Expected behavior

I want my footer to stick to the bottom but the Footer is sticking to the bottom without overlapping content.

Actual behavior

Footer is overlapping content when using class "fixed-bottom"

Resources (screenshots, code snippets etc.) App.jsx file: const App = () => { return ( ); };

export default App;

Footer.jsx component

const Footer = () => { return ( © {new Date().getFullYear()} Copyright:{" "} {" "} ŠTD Vinica{" "} ); };

export default Footer;

Wojciech Staniszewski staff commented 3 years ago

Please check here: Is this the problem You are talking about?

Please check this example:


import React from "react";
import { MDBFooter } from "mdbreact";
import "./style.css";

const App = () => {
  return (
    <div className="body">
        <p>Some content</p>

      <MDBFooter color="blue" className="text-center p-4 mt-4">
        © {new Date().getFullYear()} Copyright: ŠTD Vinica{" "}

export default App;


.body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;

main {
  flex: 1 0 auto;

Rene Verbanec free answered 3 years ago

Unfortunatelly this doesnt work. The footer is still covering content like this:

enter image description here

I have min-height set up at 100vh...

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.27.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No