I’ve been scouring the internet for days trying to find a simple solution to a sticky, fixed footer for mobile web applications where the main content doesn’t overlap the footer. I even asked ChatGPT to no avail.

I am creating a React web application that will predominately be used on mobile devices.

I would like to have a fixed, sticky footer at the bottom of the page at all times with a button to start some action within the app.

I’m able to get 90% there, but when there’s a lot of content on the screen, the content overlaps with the footer.

Here’s a code pen example:
https://codepen.io/pzpejlvc-the-bashful/pen/MWdGeBX

<div class="App">
  <header class="App-header">
    <h3>header</h3>
  </header>
  <main class="App-main">
    <h3>main</h3>
    <p>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat. Duis aute irure dolor in
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum."
    </p>
    <br />
    <p>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat. Duis aute irure dolor in
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum."
    </p>
    <br />
    <p>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat. Duis aute irure dolor in
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum."
    </p>
    <br />
    <p>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat. Duis aute irure dolor in
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum."
    </p>
    <br />
  </main>
  <footer class="App-footer">
    <h3>footer</h3>
  </footer>
</div>

.App {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  border: 1px solid red;
}

.App-header {
  padding: 10px;
  border: 1px solid green;
}

.App-main {
  flex: 1;
  padding: 20px;
  border: 1px solid blue;
}

.App-footer {
  text-align: center;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
  border: 1px solid orange;
}