Regulate Footer Resolution For Free

You can use flexbox to ensure that the footer is always at the bottom of the page. This is done by setting the giving the body element min-height: 100vh , display: flex and flex-direction: column .

What's the difference? The position: fixed mean fixed to the viewport. We tell it where to position itself (top, bottom, right, or left) and it will stay there when user scrolling. Meanwhile, when using position: sticky it won't affect until we define offset, like top: 10px .

When using position: fixed , the footer is always visible, and that's not what a sticky footer is trying to do. The meaning of a sticky footer is to stay sticked to the bottom, except if the content is longer than the viewport height.

Sticky Footer with Position Fixed The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down.

Absolute - the element is positioned absolutely to its first positioned parent. Fixed - the element is positioned related to the browser window. Sticky - the element is positioned based on the user's scroll position.

We set the position of the footer element to fixed to keep it in a fixed position on the page. We set the bottom property of the footer element to 0 to ensure that it is positioned at the bottom of the screen. We set the width of the footer element to 100% to ensure that it spans the entire width of the screen.

You set the #main-outlet height to be 100% of the viewport height (100vh) minus the height of the footer and header. So on short pages your footer will now sit right at the bottom.

A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.