Menu
When I apply the css properties shown for sticky footers for Materialize here, the height of my main element shoots up to about 33000px. Footer shows fine, but above it is blank (presumably for a length of about 33000 pixels). The elements are arranged correctly with header, then main, then footer elements.
html:
<body>
<header>
Header stuff
</header>
<main>
Main stuff
</main>
<footer>
Footer stuff
</footer>
</body>
sass:
body
display: flex
min-height: 100vh
flex-direction: column
main
flex: 1 1 auto
544
I was able to fix this by applying the parent flex css to a wrapper div instead of the body element, like so:
html:
<body>
<div class="page-flexbox-wrapper">
<header>
Header stuff
</header>
<main>
Main stuff
</main>
<footer>
Footer stuff
</footer>
</div>
</body>
sass:
.page-flexbox-wrapper
display: flex
min-height: 100vh
flex-direction: column
main
flex: 1 1 auto
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With