Sticky positioning in CSS can be problematic when combined with other elements to determine height. Specifically, sticky elements do not cooperate well with height properties like 100vh. This often results in unexpected layouts, as evidenced in the case of a coffee shop website featuring a sticky header and hero section.
To achieve the desired layout where the hero section spans the remaining vertical space, one might instinctively wrap the sticky header and hero section in a parent container. However, simply applying 100vh to the container does not guarantee that the hero section will expand correctly due to the intrinsic sizing properties of sticky elements.
Collection
[
|
...
]