2

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;
}
3
  • You want to fix footer always on on bottom ?? Aug 7, 2019 at 17:50
  • I need the footer to be at bottom of the page, just like a regular normal footer. But when the page is taller than the screen, then its not working properly.
    – user9667412
    Aug 8, 2019 at 7:58
  • try position:fixed Aug 8, 2019 at 8:28

1 Answer 1

5

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.

3
  • Unfortunately that doesn't work as well, footer still doesn't align properly to the bottom when page is taller than the screen, I guess my layout is really messed up :(
    – user9667412
    Aug 8, 2019 at 7:56
  • @ShivamAima Hm. I checked this in my browser, and it moved the footer underneath everything. Did you remove the bottom: 0; line of code? Aug 8, 2019 at 12:44
  • Yes it does, but not on mobile view, I just can't seem to fix it to the end of page in mobile view
    – user9667412
    Aug 8, 2019 at 15:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.