Новый курс! Каждый программист должен знать генеративный ИИ!
Попробуйте бесплатный урок0
footer stick at the bottom
what is the best solution to stick the footer at the bottom without it overlapping with the body content?
5 ответов
0
bottom of the browser window (so it floats) or bottom of your website?
0
bottom of website please
0
I presume you're using the footer tag. Have you tried just setting a top margin on the footer to separate it from the body?
0
i think i get it now. thanks.
0
Considering that your page has 3 main sections, header, main-container and footer, a good solution to have your footer always displayed at the bottom of your body content is to use display:flex on the body element and flex: 1 0 auto on main-container.. You need several CSS properties applied near the display: flex to make it work and use webkit prefixes for browser compatibility.
A short example would look like this:
body { display: flex; flex-direction: column; justify-content: center; }
.main-container { flex: 1 0 auto; }
header, footer { flex: none; }
You can learn more about flexbox by checking the next url:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/