KPC
Kevin Powell - Community•5mo ago
Aman

Footer not sticking to the bottom

Hello guys, For some reason, when there is not a lot of content a page, the footer sticks to the middle. When there is enough content, it is fine. Here is the footer. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>footer</title>
</head>
<body>
<footer class="bg-light text-center py-3 sticky-bottom mt-5" id="footer" th:fragment="footer">
    <div class="footer">
        &copy; 2024 PHYGITAL. All rights reserved.
    </div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>footer</title>
</head>
<body>
<footer class="bg-light text-center py-3 sticky-bottom mt-5" id="footer" th:fragment="footer">
    <div class="footer">
        &copy; 2024 PHYGITAL. All rights reserved.
    </div>
</footer>
</body>
</html>
Its a thymeleaf fragment that Im using on every page.
No description
5 Replies
b1mind
b1mind•5mo ago
relying on tailwind without knowing CSS ?
b1mind
b1mind•5mo ago
Aman
AmanOP•5mo ago
Im not a front end devoloper. Im required to create a website with bootstrap together with a spring application.
Chris Bolson
Chris Bolson•5mo ago
I don't know bootstrap but maybe you looking for fixed-bottom ? This will fix it to the bottom of the viewport, even when scrolling the content which might also not be what you want. As far as I can tell "sticky-bottom" doesn't exist unless you have either created a custom class or extended Bootstrap's Utility API. Alternatively, if you are looking to push the footer to the bottom of the viewport when there isn't enough content but then allow it to scroll with the content, you will need to look at wrapping the content in a container, give that container a min-height of 100svh (or similar viewport height unit) and then use the margin-top: auto; trick, as used in the link that b1mind included, to "force" the footer to the bottom of the viewport. Using Bootstrap this might look something like this: (note - I don't think that Bootstrap has any built-in methods to define the min-height so I included it as an inline style, but I might be wrong about that) 
<div class="d-flex flex-column" style="min-height: 100svh;">
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      
    <footer class="mt-auto bg-light">footer</footer>
</div>
<div class="d-flex flex-column" style="min-height: 100svh;">
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      
    <footer class="mt-auto bg-light">footer</footer>
</div>
An alternative method would be to wrap the main content in it's own container and give it flex-grow:1 which will tell it to take up all the available space. In Boostrap this might look something like this: 
<div class="d-flex flex-column" style="min-height: 100svh;">

    <div class="flex-grow-1 ">
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
     </div>
      
    <footer class="bg-light">footer</footer>
</div>
<div class="d-flex flex-column" style="min-height: 100svh;">

    <div class="flex-grow-1 ">
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
     </div>
      
    <footer class="bg-light">footer</footer>
</div>
ἔρως
ἔρως•5mo ago
with grid, you can do something like this: 
.container {
    display: grid;
    grid-template-rows: 40px auto 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}
.container {
    display: grid;
    grid-template-rows: 40px auto 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}
you give your <header> or <nav> an height, the <main> fills the empty space and then the <footer> should stick to the bottom

Did you find this page helpful?