Inspiring

Question

problems with coding sticky footer

Forum|Forum|2 years ago
March 23, 2023
3 replies
3014 views

I just updated my first website, which was a combo of bootstrap and my own coding. I updated the footer in the template to include favicons and a background color. I used CSS and flexbox to position my text with the favicons. Everything looked fine until I realized that the footer was only "sticky" when there was alot of content on the page. In the emptier pages, the footer floats to the top.

good page: https://www.drct.com/

not good: https://www.drct.com/search.html

I tried adding a footer class called "footer-main", toggling the position..absolute, relative, fixed, etc. That worked with one page, but not with the other. I actually did figure this problem out on my other website, but that was a different design without bootsrap. Is there any quickfix, without messing up the entire website? Is there a bootstrap footer class that will do some magic? Please excuse my coding. This was my first website from a year ago. The footer styles are mostly in "footer.css". Thanks for any feedback.

This topic has been closed for replies.

Nancy OShea

Community Expert

FOOTER BOTTOM ON LONG & SHORT PAGES - Works in Bootstrap 4 or 5.

Step #1 add classes to <body> tag.

Step #2 add class to <footer> or its parent <container> if you use one.

That's all there is to it. 🙂

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

FOOTER BOTTOM ON LONG & SHORT PAGES - Works in Bootstrap 4 or 5.

Step #1 add classes to <body> tag.
<body class="d-flex flex-column min-vh-100">

Step #2 add class to <footer> or its parent <container> if you use one.
<footer class="mt-auto">

That's all there is to it. 🙂

By @Nancy OShea

I think we already solved that a few hours ago, using the exact same principles, but thanks for the clarification...........its a slow day around here, gets slower each day, I think, as DWs time runs out. What are we going to do to amuse ourselves.....hummm.

Nancy OShea

Community Expert

It's slow everywhere. Maybe due to Spring Break and the epic snow pack.

Some mountain residents in California have had no services for more than a month An otherwise 20 min road trip down the mountain takes 4 hours by escorted car caravans to minimize risk of avalanche. Kids can't get to school. Power & Internet services are cut off. People are still digging out from under snow. It's incredible how much impact one brutal winter can have on infrastructure.

We live well below the snow line. But we've been pounded by successive atmospheric rivers and bomb cyclones. Our power & Internet have been intermittent. The Los Angles area was hit by a rare EF1 Tornado. Flooding has forced multiple road closures. Many homes & hillsides are lost to landslides. And it doesn't stop here. This atmospheric mess is moving across the country...

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

I just updated my first website, which was a combo of bootstrap and my own coding. I updated the footer in the template to include favicons and a background color. I used CSS and flexbox to position my text with the favicons. Everything looked fine until I realized that the footer was only "sticky" when there was alot of content on the page. In the emptier pages, the footer floats to the top.
good page: https://www.drct.com/
not good: https://www.drct.com/search.html
I tried adding a footer class called "footer-main", toggling the position..absolute, relative, fixed, etc. That worked with one page, but not with the other. I actually did figure this problem out on my other website, but that was a different design without bootsrap. Is there any quickfix, without messing up the entire website? Is there a bootstrap footer class that will do some magic? Please excuse my coding. This was my first website from a year ago. The footer styles are mostly in "footer.css". Thanks for any feedback.

By @default0vaokg78cv42

On the 'search.html' page, which doesnt observe the footer at the bottom of the browser window in cases where the content is not enough to push it to the bottom of the browser window you need to make some minor updates to your css.

Add :

body {

height: 100vh;

display: flex;

flex-direction: column;

}

footer-info {

margin-top: auto;

}

OR if you want to deploy the Bootstrap utilitiy classes, which do the same thing:

add:

class="d-flex flex-column vh-100" to the opening <body> tag and add mt-auto to the existing footer-info class.

Bens solution will also work but you need to add another wrapper div to contain your main content on the search.html and set its css to flex: 1; This results in the wrapper div consuming all the extra vertical space left over, after taking into account your nav and footer and is a recognised solution.

How you choose to proceed is up to you.......there is never usually one solution to a problem. If possible I tend to try and construct with as few <divs> as I can, which in my opinion makes the code more managable in the long term. However should you need to have a background color consuming all the extra vertical space or a background image then the wrapper div would be a more solid approach.

Until you become something of an 'expert' and are able to figure these issues out for yourself and how YOU feel which best suits YOU and the objective it will be a bit problematical. I follow many so-called 'expert' you-tube channels, with 100s of thousands of subscribers, which in my opinion are sometimes feeding over-kill solutions to unsuspecting newbies.

D

default0vaokg78cv42Author

Inspiring

Thanks, I tried both on test pages. No luck. It works on the empty page, but not on the full page. On the full page, the footer rides up to the middle. I did chage the div to a footer, by the way. I must be doing something wrong. Perhaps the new body class is being overridden by what I aldready have. I will keep trying. My website design is a product of "expert youtube videos". I wish there were better resources, more easily found. Books I find on Amazon are either outdated, too simplistic, or not specific to my questions. The computer section at our B&N has been mostly discontinued. I look for answers on google search, I see mostly software and services they are trying to push..not much coding info. I plan to do a redesing evetually to clean up the code. Do you remcomment any particular book?

O

osgood_

Legend

Do you actually want a 'sticky' footer? This is a footer which sticks to the bottom of the browser window in ALL cases, whether the main content exceeds the height of the browser window (the footer will still be visible and stick to the bottom of the browser window while the main content scrolls) and also when the main content doesn't exceed the height of the browser window or do you just want a footer which adheres itself to the bottom of the browser window ONLY when the main content is not sufficient enough to push it to the bottom of the browser window?