Footer overlapping content

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: https://mdbootstrap.com/support/jquery/footer-positioning/ Is this the problem You are talking about?

Add comment

Wojciech Staniszewski staff answered 3 years ago

0 0 Best answer

Please insert min. 20 characters.

Please check this example:

App.js:

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

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

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

export default App;

Style.css:

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

main {
  flex: 1 0 auto;
}

Add comment

Rene Verbanec free answered 3 years ago

0 0 Best answer