here is my site http://iadprint.com/services
i have tried everything to get the footer to stick to the bottom but nothing wont work other than doing a set height in css on the tag #cright but i dont want to do that since dynamic content would go in there. can anyone see what im missing or doing wrong?
thanks
Just wrap your . container and your . footer in a flex container with a min-height: 100vh, switch the direction to column so that they stack on top of each other, and justify the content with space between so that footer will move to the bottom. This is THE way to go!
To make a footer fixed at the bottom of the webpage, you could use position: fixed. < div id = "footer" >This is a footer. This stays at the bottom of the page.
The footer is set to absolute , sticking to the bottom: 0 of the page-container it is within. This is important, as it is not absolute to the viewport, but will move down if the page-container is taller than the viewport. As stated, its height, arbitrarily set to 2.5rem here, is used in the content-wrap above it.
To make a sticky footer in React, we can set the position CSS property of the footer element to fixed . We set the style prop of the footer div to an object that has the position property set to 'fixed' . Also, we set the bottom property to '0' to keep the footer div at the bottom.
add to your footer css
position:absolute;
bottom:0;
If you want footer to always be at the bottom regardless of window scroll then use
position:fixed;
bottom:0;
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