Why is `position: sticky` not working on my footer when the height of the page body and the #main element are specified?

position: sticky not functioning when height specified

Problem:

Users encounter an issue where the footer, designated as #footerNav, fails to adhere to position: sticky behavior when a height property is set for both the page body and the #main element. The footer remains static instead of scrolling fixed to the top of the viewport.

Solution:

The issue arises from the overflow of content caused by the height properties. position: sticky is designed to become active only when its containing block reaches a specified threshold. In this case, setting body { height: 100%; } creates a situation where the footer immediately reaches the end of its containing block, preventing position: sticky from ever activating.

Explanation:

According to the definition of position: sticky, the sticky position is applied when the element crosses a specified threshold within its containing block. The containing block in this case is the body, and as body { height: 100% } is set, the height of the body is constrained to the viewport.

When #main { height: 92% } is specified, 92% of the available height is allocated to #main, leaving only 8% for #footerNav. Since #footerNav is already at the bottom of its containing block (the body), it cannot scroll past the viewport boundary and activate position: sticky.

Solution:

To resolve the issue, ensure that the content does not overflow the containing block. This can be accomplished by removing the height properties from body and #main, allowing the content to flow naturally within the viewport without causing overflow.

Additional Notes:

• Specifying height as a percentage, such as vh, is still not advisable as it may lead to the same problem.
• The issue was encountered in Firefox 61 (Nightly), Safari 53 (Tech Preview), and Chrome 65.

The above is the detailed content of Why is `position: sticky` not working on my footer when the height of the page body and the #main element are specified?. For more information, please follow other related articles on the PHP Chinese website!