Bug found on timbu.com (HNGinternship)

A footer is the last element on the page. At a minimum it is at the bottom of the viewport, or lower if the page content is taller than the viewport.

The bug i found on timbu.com is a function of site layout issue and a common one too. it occurs When working with dynamic content that includes a footer. the problem sometimes occurs where the content on a page is not enough to fill it.

After clicking the join now button On (https://timbu.com/study/) to apply for masters abroad. The footer of the webpage (https://timbu.com/study/checkout), rather than staying at the bottom of the page where we would want it to stay, rises up and leaves a blank space beneath it.

This shows the behaviour we don’t want:

So here’s my simple css fix;

#page-container {
  position: relative;
  min-height: 100vh;
}
#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

So what is this doing?

• The footer is set to absolute, sticking to the bottom: 0 of the page-container it is within. This is important, as it is not absolute to the viewport, but will move down if the page-container is taller than the viewport. As stated, its height, arbitrarily set to 2.5rem here, is used in the content-wrap above it.

Thanks for reading. Here is one of my recent post:

https://t.co/0DT7o3ZtC7