I am building a landing page where the user first sees a main area with a footer underneath it. Scrolling further down reveals that the footer is a sticky header, and I aim to use pure CSS to achieve this. To obtain the fullscreen appearance of the main content and the footer I set the height property to two different values: 92% and 8% (using vh also doesn't work). No matter the height I specify in my CSS (different units and all), my footer div is not sticking. As soon as I remove the height property it works as intended.
Here is a screenshot of my page before removing the height properties:
As you can see, it does not stick:
After removing the height property values, it does stick:
Below the relevant code:
html,body { height: 100%; margin: 0;}#main { height: 92%;}#landing { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center;}#landingContent { width: 20vw;}#footerNav { height: 8%; display: flex; align-items: center; position: -webkit-sticky; position: sticky; top: 0px;}<div id="main"><div id="landing"><div id="landingContent"><h1 class="logo">Logo</h1><p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p><button>Button</button></div></div></div><div id="footerNav"><div id="footerNavContent"><h1 class="logo">Logo</h1></div></div><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>I have read that using the overflow property can be problematic, though it is is not present nor have I heard anything about height being an issue for others. I might be wrong, of course.
I have tested on:
- Firefox 61 (Nightly)
- Safari 53 (Tech Preview)
- Chrome 65
Note - removing the height property from #main keeps #footerNav sticky.