Newbie question : footer position

Hello,

i would like my footer to be sticked at the bottom of the navigator no matter the height of the page, i’ve made a site that works except for this little glitch when my page is very short in height, the footer is not sticked a the bottom of the navigator, leaving a white space underneath it (see the picture below)

i don’t know how to set it properly, i would like it to be fixed at the very bottom of the navigator no matter the height of the content above it, i don’t to add a bottom padding to my content coz my content have a different height on each pages of the site and thus i would have to set a different botton padding for each page and i’m not even sure this would work.

Thanks in advance for helping me, have a nice day

Claude

I do it like this
look at the classes op the body, main and footer

<body class="d-flex flex-column vh-100">
<header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    ... your navbar
  </nav>
</header>
<main class="flex-shrink-0">
  ...the page content here
</main>

<footer class="footer mt-auto py-3 bg-dark">
  <div class="container">
    <span class="text-white">Your footer text here.</span>
  </div>
</footer>
</body>

Here’s an example I found on the web. Looks basically like what @kuligaposten suggested

just add the class “fixed-bottom” to the < footer > … works in bs4 and 5

first of all, thanks to you all for your time and answers, un fortunately, they are only partly solved the problem.

1 - i’ve tried the simplest first just adding the "fixed bottom class to the footer on my index page (this footer is pasted on all the others pages of the site), it seemed as the footer was indeed sticked at the bottom of every pages no matter their height but when i’ve tried to scroll on long pages, it didn’t worked anymore, at some point the content is hidden behing the footer and i can’t scroll it anymore (i can scroll the full height of the page when i remove the “fixed bottom” class.

That’s how fixed-bottom supposed to work

you need to add some bottom padding or margin at the end of your content

Post a link to your website so we can take a look at it.

I’ve just done a quick example for you
https://snippets.bss.design/long.html

Also included a line of javascript to automatically change the bottom padding to match the height of the footer:

var fh=document.getElementById(“myFooter”).clientHeight;console.log(fh),document.getElementById(“bodytext”).style.paddingBottom=fh+30+“px”;

This looks for the footer (#myFooter) height and changes the bottom padding of a container div (#bodytext) +30px for luck.

The script won’t update if the page is resized, so you might want to wrap in a window.location.reload() if you use it

@claude.girolet
Use Bootstraps flexbox no need for extra css or javascript

1 Like

Thanks to you all for your advices and kindness you’re part of a wonderful helping community :slight_smile: i’m a newbie in bootstrap but if one day i can return the favor, that would be a favor :slight_smile: have a nice week-end

Claude

The Houses are missing on Kingsley Shacklebolt, Mrs Norris and Argus Filch. Despite knowing absolutely nothing about the Harry Potter universe, I fear that the entire example is now in question. :upside_down_face:

@printninja
No problem at all, you know the examples are self destruct in a day or two :mask:

1 Like