Why Doesn't 'position: sticky' Work When Setting 'height'?

'position:sticky' not working when setting 'height'

As you've noticed, setting the height property on your footer element prevents it from sticking to the top of the page when you scroll down. This behavior occurs because of the way the sticky positioning algorithm works.

According to the CSS specification, a sticky element is treated as relatively positioned until its containing block crosses a specified threshold. In your case, the containing block is the body element, which has a height of 100%. When the main element, which has a height of 92%, is scrolled down, the footer element reaches the bottom of the body element and is considered to be at the opposite edge of its containing block. Therefore, it is no longer treated as sticky and stays at the bottom of the page.

To fix this issue, you can remove the height property from the main element. This will allow the footer element to stick to the top of the page as intended. Alternatively, you can set the height property on the body element to 100vh instead of 100%. This will ensure that the body element is always the same height as the viewport, and the footer element will stick to the top of the page regardless of the height of the main element.

The above is the detailed content of Why Doesn't 'position: sticky' Work When Setting 'height'?. For more information, please follow other related articles on the PHP Chinese website!