I can’t get the footer to stay at the bottom of the page without using flex, and flex causes problems with my content of the page so I need a different solution
You can see my CSS here: https://github.com/Lncvrt/website/blob/main/app/styles.css
I tried solving it using flex (this causes weird bugs on my page) and a few other things but they either are fixed height on the page (like set to the bottom but not actually adjustable for when there is more content on the page, if that makes sense)
lncvrt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3
You can fix the footer by taking 2 divs. 1 will contain all areas like header, banner etc and 2nd will contain footer. You have to add 1 extra blank div with main content area having height will be same of the footer height. Try this code
CSS code:
body, html{
height: 100%;
}
.outer-container{
margin: 0px auto -200px;
}
.push{
height: 200px;
}
HTML Structure:
<div class="outer-container">
<header></header>
other content section divs
<div class="push"></div>
</div>
<footer>footer content</footer>
I’d say use 2 divs, one for the content and one for the footer. For the content div, give it the properties min-height: 100%, box-sizing: border-box, padding-bottom: [footer height] so it takes up the full height of the page – the footers height
Then, for the footer, give it position: absolute, bottom: 0 on a separate div, with a set pixel height the same as the bottom padding for the content.
Hope this helps 😀