-2
I recently realized that the footer of my page, although fixed at the bottom, was superimposing the text.
So I looked for some solutions to this and I saw that most of the solutions were position: absolute or position: fixed in the footer. In short, something like this:
footer {
position: absolute;
bottom: 0;
width: 100%;
}
If you don’t have a lot of content on the page, great, no problem! Look how it looks:
* {
text-align: center;
}
header,
footer {
height: 30px;
margin: 10px 0;
background-color: #dddddd;
}
footer {
position: fixed;
bottom: 0;
width: 100%
}<header>TÍTULO</header>
<main>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</main>
<footer>RODAPÉ</footer>But if you have enough, the footer will overlay the text and look like this:
(In this I used the position: fixed so the footer doesn’t get lost in the middle of the text)
* {
text-align: center;
}
header,
footer {
height: 30px;
margin: 10px 0;
background-color: #dddddd;
}
footer {
position: fixed;
bottom: 0;
width: 100%
}<header>TÍTULO</header>
<main>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim luctus tincidunt. Ut fermentum nibh nec molestie venenatis. Nam eget sapien felis. Fusce bibendum est sit amet magna varius varius. Curabitur nulla nibh, mollis ac mattis quis, vehicula malesuada urna. Donec nisi turpis, commodo ac pellentesque nec, vehicula ut nisi. Nullam vulputate gravida facilisis. Vivamus suscipit velit ante. Proin malesuada porttitor nulla in euismod. Aenean laoreet laoreet odio a egestas. Nunc in orci volutpat, luctus lectus sed, tincidunt neque. Donec porttitor scelerisque accumsan. Pellentesque suscipit mauris tortor, eu scelerisque mi pharetra dapibus.
Aliquam nec euismod metus, et tincidunt est. Suspendisse elementum molestie tellus ac feugiat. Cras tempus mauris id aliquet tincidunt. Etiam velit velit, consectetur at consectetur nec, molestie vel dolor. Nulla at elementum diam, sit amet posuere nisi. Sed quis libero tristique, laoreet tellus vel, finibus leo. Sed a maximus dui, at bibendum nulla.
Suspendisse nibh nunc, lacinia non cursus at, condimentum laoreet lacus. Nunc nec felis eget diam egestas scelerisque nec aliquam velit. Phasellus tristique justo eu commodo bibendum. Quisque interdum lectus quis sapien molestie, at volutpat tellus tincidunt. Integer mollis libero eu ipsum ornare sollicitudin. Quisque non feugiat purus. Ut ante sapien, pellentesque a nibh ultricies, sodales volutpat neque. Ut nec euismod mi. Sed tempus porttitor risus a bibendum. Maecenas mauris felis, dictum quis convallis sed, tempus ut arcu. Aliquam lobortis lorem magna, efficitur porttitor nisl dignissim eu. Nulla gravida est lorem, sed vestibulum nunc convallis ut. Fusce eu finibus sem, volutpat faucibus sapien. Vivamus commodo vehicula augue a finibus. Vestibulum laoreet rutrum enim nec pretium. Quisque sit amet nulla hendrerit, bibendum risus in, fringilla eros.
Donec non lectus turpis. Vestibulum et eleifend arcu. Praesent vulputate efficitur nibh nec tempus. Quisque ut sem massa. Aenean metus mauris, venenatis a dictum sed, pellentesque id urna. Morbi posuere, purus non consequat finibus, tortor lectus semper nisi, sit amet maximus augue leo ac mauris. Nulla facilisi. Aenean suscipit, erat ut tempus ultricies, sapien leo scelerisque nibh, ac fringilla nibh risus viverra tortor. Nullam ut euismod nulla. Nam in massa quis erat dictum semper. Suspendisse viverra massa at turpis aliquam, sed placerat arcu condimentum. Vivamus ultrices aliquet rhoncus. Aenean aliquet tellus quis fringilla lacinia. Curabitur ut cursus tellus, at tincidunt libero. Cras euismod, nibh sit amet imperdiet molestie, ipsum justo dapibus risus, et maximus tellus est at metus.
Aliquam accumsan tellus turpis, ac fringilla enim posuere dictum. Morbi ac volutpat lacus. Integer accumsan sit amet odio eu iaculis. Proin sagittis efficitur risus, sed blandit massa sagittis et. Donec euismod, mauris sed cursus egestas, lacus tortor pharetra diam, luctus aliquet nulla ipsum ac leo. Ut luctus arcu dolor. Duis varius blandit porta. Morbi fermentum magna ut massa congue hendrerit. Morbi venenatis ullamcorper lacus. Morbi dictum, lectus viverra malesuada tincidunt, purus sapien facilisis libero, eget pharetra elit augue a erat. Etiam auctor nibh molestie massa lacinia, quis semper metus finibus. Vivamus porttitor rhoncus porta. Pellentesque ornare rutrum sagittis.</main>
<footer>RODAPÉ</footer>If you have a dynamic content or a table that alternates the number of rows is even worse.
But then, what to do? How to do something more generic and works well on most pages?
There is no need for Calc, you can use one of the techniques I described in Footer always at the bottom of the page, Calc even helps, but a simple margin-Botton in "body" or "main" (depends on the element you use for the content you can grow/expand) with the same footer height already solves.
– Guilherme Nascimento