JS Problems geeksforgeeks Exercises and Solutions for Beginners

How to Keep a Footer at the Bottom but NOT Fixed [All Method]️

It’s also a question How to Keep a Footer at the Bottom but NOT Fixed? By following this guide, you will be able to deal with these sorts of difficulties.
Question: What is the best way to approach this problem? Answer: Check out this blog code to learn how to fix errors How to Keep a Footer at the Bottom but NOT Fixed. Question: What is causing this error and what can be done to fix it? Answer: Check out this blog for a solution to your problem.

How can we style a footer so that it stays at the bottom of a page?

Suppose we’re working with the following HTML layout.

<div class="container">
  <header>Header</header>
  <section>Content</section>
  <footer>Footer</footer>
</div>

In this scenario, we have two criteria:

  1. If the <section> content is shorter in height than the page, the footer should stick to the bottom of the page.
  2. If the <section> content is taller in height than the page, the footer should trail below all the content (it should not be fixed or visible until the user scrolls all the way down).
html, body {
  height: 100%;
}
.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
section {
  flex: 1;
}

The solution to this problem is quite simple using flexbox.

The idea here is to use flex: 1, which is equivalent to flex: 1 1 0 (in most browsers).

We are specifying the following:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

flex-grow will dictate the amount of available space an element should take up inside a flex container. Setting it to 1 in this case means that it will take up all remaining, available space.

If the <section> content is shorter than the page height, then there will be lots of space to fill (since .container will always have a height of at least 100%), thereby pushing the footer to the bottom.

If this solution does not work, I’ve found that setting the minimum height of the container to a value dependent on the footer height often helps.

Suppose the footer height is 60px.

.container {
  min-height: calc(100% - 60px);
  ...
}


Now you learned, How you can use & How to Keep a Footer at the Bottom but NOT Fixed.
If you need assistance at any stage, please feel free to contact me.

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button