CODEWITHSUNDEEP
cssreactjs
user9667412
user9667412

Reputation:

How to fix footer at the bottom of a component in react?

I'm trying to put a footer at the end of my homepage component. In my website, the overflow is made auto only for mobile view with a media query, so the scroll remains hidden for desktop view. I have used all the solutions I could find but nothing helps, the footer is perfectly aligned in desktop view at the bottom, but for mobile view, it is aligned at the end of the screen (not the page). I have no clue how to fix this.

website: https://shivamaima.netlify.com/

git: https://github.com/darwin619/portfolio

.homepage {
    text-align: center;
    width: 100%;
    position:relative;
    padding:0;
    margin:0;
    min-height:100vh;
    top:0; 
    @media screen and (max-width: 600px) {
        overflow: auto;
        height: 100vh;
}
    .footer {

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    text-align: center;
}

Upvotes: 2

Views: 12648

Answers (2)

Yokesh Chowdary
Yokesh Chowdary

Reputation: 1

min-height worked for me. I am able to set footer at the bottom even if I try to decrease the height of main which is in b/w the header and footer.

Upvotes: 0

silencedogood
silencedogood

Reputation: 3299

There's a couple solutions here. Instead of bottom: 0 use:

margin-top: 100vh;

This will set the footer at the bottom of the viewport height.

However, your page has quite a few layout issues, and this is really a band-aid. You should consider utilizing flexbox, min-height, or grid to create a sticky footer.

That being said, the solutions for this using react are what they would be in most any circumstance.

The following solutions are preferable because they are "true" dynamic sticky footers. Meaning, the footer stays at the bottom until the main content extends beyond that area, at which point the footer will begin adjusting its position downward:

The min-height Solution

nav {
  height: 40px;
  padding: 10px;
  background: lightblue;
}

main {
  padding: 20px;
  background: purple;
  min-height: calc(100vh - 170px);
}

footer {
  background: magenta;
  padding: 10px;
  height: 50px;
}
<html>
<body>
  <nav>
    Navigation
  </nav>
  <main>
    Page content
  </main>
  <footer> 
    Footer that stays put
  </footer>
</body>
</html>

As can be seen, we set the minimum height of the content to 100vh minus whatever the combined height (plus padding) happens to be of your nav and content containers.

This results in a footer that sticks, along with the ability to drop further if the content exceeds the min-height value.

The same effect can be accomplished using flexbox, which is arguably a more dynamic solution. However, it comes at the expense of an extra container element. We could apply flex to body, but that is rarely a proper solution:

The flex box solution

.container {
    display: flex;
    min-height: calc(100vh - 40px);
    flex-direction: column;
}

nav {
    height: 40px;
    padding: 10px;
    background: lightblue;
}

main {
    padding: 20px;
    background: purple;
    flex: 1;
}

footer {
    background: magenta;
    padding: 10px;
    height: 50px;
}
<body>
    // Use className instead of class for react (jsx) 
    <div class="container">
        <nav>
            Navigation
        </nav>
        <main>
            Main Content Area
        </main>
        <footer> 
            Footer that stays put
        </footer>
    </div>
  </body>

The CSS Grid Solution with min-height

.container {
    display: grid;
    grid-gap: 1em 0;
    grid: auto auto 1fr / 10vw 1fr 10vw;
    margin: 0;
    min-height: calc(100vh - 40px);
}

nav {
    background-color: lightblue;
    grid-column: 2;
    padding: 20px;
}

main {
    background-color: purple;
    display: grid;
    grid-column: 2;
    padding: 20px;
}
footer {
    background-color: magenta;
    align-self: end;
    grid-column: 2;
    padding: 20px;
}
// Use className instead of class for react (jsx)
<div class="container">  
      <nav>
          Navigation
      </nav>
      <main>
          Main Content Area
      </main>
      <footer> 
          Footer that stays put
      </footer>
</div>

Note: Change class to className if you're working on a react project.

Upvotes: 7

Related Questions