Question 262204 in CSS Question posted in
Some basic documentation can be found here.

Css – How to set sticky footer in react js using % instead of vh

My aim is to use % instead of Vh when im dealing with sticky footer in react js.
I tried to use % but the footer won’t stick to the bottom.
I set up a simple react app to test this so if anyone knows how to fix it please help me.

Please notice i don’t want to apply vh so it can also be mobile friendly at the same time and avoiding fixed heights such as vh.

    /*My code */

    **APP js **/

     /*Import Styles*/
     import "./styles/App.scss";
     import "./styles/Variables.scss";
     /*Import the components*/
     import Navigation from "./components/Navigation/Navigation";
     import Showcase from "./components/Showcase/Showcase";
     import Footer from "./components/Footer/Footer";
     /*Components*/
     const App = () => {
        return (
            <div className="App">
              <Navigation />
              <Showcase />
              <Footer />
          </div>
         )
         }
      export  default  App;

       /**App scss **/

      html {
         height: 100%;
         background-color: gray;
       }

      .App {
          display: flex;
          flex-direction: column;
          min-height: 100%;
        }


       /*Footer scss**/

        .footer {
          min-height: auto;
          border: 1px solid black;
         }


         /**showcase scss **/
        is Empty not styles applied.

`

Tags:

2

Answers


  1. 0

    should work when wrapping all content inside a div like in App.js:

        * {
      margin: 0;
      padding: 0;
    }
    html {
      height: 100%;
      background-color: gray;
    }
    body, .app {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    header {
      height: 50px;
      background-color: lightblue;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    main {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    footer {
      height: 100px;
      background-color: lightgray;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    <div class="app">
<header>Sticky Footer Test</header>

<main>content</main>

<footer>Footer Content</footer>

</div>
    Login or Signup to reply.
  2. 0

    I can’t test your code but try: .footer { margin-top: auto; }

    Or give Showcase a flex-grow: 1;.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search