Kevin Powell - Community•4w ago

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.

5 Replies

b1mind•4w ago

relying on tailwind without knowing CSS ?

b1mind•4w ago

https://codepen.io/b1mind/pen/PojdyQz

Brent Morton

CodePen

Pushed footers Flex / Grid

...

Aman•4w ago

Im not a front end devoloper. Im required to create a website with bootstrap together with a spring application.

Chris Bolson•4w 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>

ἔρως•4w 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

Gaming

Programming

Footer not sticking to the bottom