I am in the process of creating a website that features a fixed (non-sticky) footer placed behind the main content using the z-index property. The footer only becomes visible when the user scrolls to the bottom of the page, achieved by assigning a margin-bottom value to .pagewrap equal to the height of the footer.
Since the height of the footer is not static and can change with varying content and viewport width, it is impossible to set a fixed margin-bottom value for the .pagewrap div in pixels. Instead, I need to determine the current height of the footer element dynamically and apply that value as the margin-bottom on the main div, most likely utilizing JS or jQuery (though a CSS-only solution would be ideal).
It's worth noting that since text re-flow inside the footer can alter its height, any solution to this issue must take place both on resize and on initial load.
While there are resources available for matching heights using JS and jQuery, they typically apply the value to the height property of the targeted element. In this case, the value is required for a different property.
JSFiddle: https://jsfiddle.net/sL0brv3j/
HTML:
<div class="pagewrap">
<p>Scroll down</p>
</div>
<footer>
<p>Fixed position, behind the .pagewrap element</p>
</footer>
CSS:
body {
margin: 0;
}
.pagewrap {
background: #FFF;
width: 100%;
min-height: 100vh;
position: relative;
margin-bottom: 64px; /* should be set to = dynamic height of footer*/
z-index: 1;
}
footer {
background: #000;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
height: auto; /* changeable value */
z-index: 0;
}
footer p {
color: #FFF;
}