OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Sticky footer without overlap

  • Thread starter Thread starter Ahmed Khan
  • Start date Start date
A

Ahmed Khan

Guest
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

Code:
<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>

Code:
.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;
}

<p>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.</p>
<p>I am creating a React web application that will predominately be used on mobile devices.</p>
<p>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.</p>
<p>I'm able to get 90% there, but when there's a lot of content on the screen, the content overlaps with the footer.</p>
<p>Here's a code pen example:
<a href="https://codepen.io/pzpejlvc-the-bashful/pen/MWdGeBX" rel="nofollow noreferrer">https://codepen.io/pzpejlvc-the-bashful/pen/MWdGeBX</a></p>
<pre class="lang-html prettyprint-override"><code><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>
</code></pre>
<pre class="lang-css prettyprint-override"><code>.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;
}
</code></pre>
 

Online statistics

Members online
0
Guests online
5
Total visitors
5
Top