Fixed Footer (while i do not want this) in React

Question

Here's the problem :

My footer is normally displayed there, at the end of the page but when the user makes some actions on the page that will extends the page size :

My footer acts like it's fixed on the page, it is on the bottom of the screen that the user sees, not at the bottom of the page (even if the page extends), how can i fix this ?

Here is the code : App.js :

import Home from "./Components/Home";
import Footer from "./Components/Footer";
import './App.css';

export default function App() {
    return (
        <>
            <div id="wordclouds">
                <Home/>
            </div>
            <div id="footer">
                <Footer />
            </div>
        </>
    )
}

Footer.jsx :

import React from 'react'

const Footer = () => {
  return (
    <>
  <footer>
          <a href='https://github.com/ulrichc1' rel="noreferrer" target="_blank"> <svg href="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path fill="#000000" d="M10.07031,20.50291a1.00008,1.00008,0,0,0-1.18115-.9834c-1.30908.24024-2.96191.27637-3.40137-.958a5.70754,5.70754,0,0,0-1.83691-2.415,1.20073,1.20073,0,0,1-.1665-.10938,1,1,0,0,0-.93067-.64551H2.54883a.99965.99965,0,0,0-1,.99512c-.00391.81543.811,1.33789,1.1416,1.51465a4.4408,4.4408,0,0,1,.92383,1.35937c.36426,1.02344,1.42285,2.57617,4.46582,2.376.001.03516.00195.06836.00244.09863l.00439.26758a1,1,0,0,0,2,0l-.00488-.31836C10.07715,21.4951,10.07031,21.22068,10.07031,20.50291Zm10.667-15.126c.03174-.125.063-.26367.09034-.41992a6.27792,6.27792,0,0,0-.40821-3.293,1.002,1.002,0,0,0-.61572-.58007c-.356-.12012-1.67041-.35645-4.18408,1.25a13.86918,13.86918,0,0,0-6.354,0C6.76221.751,5.45459.9658,5.10205,1.07908a.99744.99744,0,0,0-.63135.584,6.3003,6.3003,0,0,0-.40332,3.35644c.02442.12793.05078.2461.07813.35449A6.26928,6.26928,0,0,0,2.89014,9.20311a8.42168,8.42168,0,0,0,.04248.92187c.334,4.60254,3.334,5.98438,5.42431,6.459-.04345.125-.083.25878-.11816.40039a1.00023,1.00023,0,0,0,1.94238.47851,1.6784,1.6784,0,0,1,.46778-.87793.99947.99947,0,0,0-.5459-1.74512c-3.4541-.39453-4.95362-1.80175-5.1792-4.89843a6.61076,6.61076,0,0,1-.03369-.73828,4.25769,4.25769,0,0,1,.91943-2.71289,3.022,3.022,0,0,1,.1958-.23145.99988.99988,0,0,0,.188-1.02441,3.3876,3.3876,0,0,1-.15527-.55567A4.09356,4.09356,0,0,1,6.1167,3.06346a7.54263,7.54263,0,0,1,2.415,1.17968,1.00877,1.00877,0,0,0,.82764.13282,11.77716,11.77716,0,0,1,6.17285.001,1.00549,1.00549,0,0,0,.83056-.13769,7.572,7.572,0,0,1,2.40528-1.19043,4.03977,4.03977,0,0,1,.0874,1.57812,3.205,3.205,0,0,1-.16895.60743.9999.9999,0,0,0,.188,1.02441c.07715.08691.1543.18066.22363.26855A4.12186,4.12186,0,0,1,20,9.20311a7.03888,7.03888,0,0,1-.0376.77734c-.22021,3.05566-1.72558,4.46387-5.1958,4.85937a1,1,0,0,0-.54541,1.7461,1.63079,1.63079,0,0,1,.46631.9082,3.06079,3.06079,0,0,1,.09229.81934v2.334C14.77,21.2949,14.77,21.78025,14.77,22.00291a1,1,0,1,0,2,0c0-.2168,0-.69238.00977-1.33984V18.31346a4.8815,4.8815,0,0,0-.15479-1.31153,4.25638,4.25638,0,0,0-.11621-.416,6.51258,6.51258,0,0,0,5.44531-6.42383A8.69677,8.69677,0,0,0,22,9.20311,6.13062,6.13062,0,0,0,20.7373,5.37693Z"/></svg></a>
          <span> ULRICH COUDIN 2023 - Tous droits réservés</span>
  </footer>
    </>
  )
}

export default Footer

App.css :

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    clear: both;
}

#wordclouds {
    flex: 1;
}

#footer {
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px;
}

Sure i added it i forgot the css sorry y'all for the forgetting — Ulrich, May 06 '23 at 20:24

Puneet Sharma · Accepted Answer · 2023-05-06T21:02:10.523

1

Updated as Css provided.

Absolute Position don't help here i suggest you to

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  clear: both;
}

#wordclouds {
  flex-grow: 1;
}

#footer {
  text-align: center;
  width: 100%;
  padding: 10px;
}

Check code pen codepen.io/puneetxp/pen/jOeZbZa working example

Previous Answer:

This css in tailwind and footer remain on bottom i increase height for footer as you can't see because of warning about using cdn of tailwind. Tailwind need only understanding of css.

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex min-h-screen flex-col bg-blue-500">
  <div class="grow flex flex-col bg-blue-400">
  </div>
  <div class="bg-blue-300 h-56"> Footer</div>
</div>

edited May 06 '23 at 21:02

answered May 06 '23 at 20:24

Puneet Sharma

307
3
9

it's still doesn't working the footer keep on staying there and not at the bottom of the page with the page extending – Ulrich May 06 '23 at 20:34
@Ulrich this is working https://codepen.io/puneetxp/pen/jOeZbZa – Puneet Sharma May 06 '23 at 20:35
@Ulrich if you checking tailwind version bottom get cover by the console.log warning if you open in full screen that will work – Puneet Sharma May 06 '23 at 20:38

Fixed Footer (while i do not want this) in React

1 Answers1