CSS only for fixed variable height footer, no tables, no overlap
As the title states, here are the requirements:
- a footer that should always be at the bottom of the viewport (no pushing out)
- CSS only
- height based on the content of the footer (variable)
- prevents the main content item from overlapping somehow - when scrolling down
- no tables
heading
Content
footnote
if you remove any requirements i know how to do it but not with all requirement. does anyone know a solution?
a source to share
To set the footer at the bottom, you can use the following option:
.some-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%
}
The problem is that the main content will be behind the footer and you won't be able to scroll through it. And you can't just fit padding-bottom
in the content because you don't know the height of the footer.
I would recommend placing the duplicate footer after the content, but this one with position: relative
and with opacity: 0
. This way, you can always scroll until all content is visible, regardless of the height of the footer.
a source to share
This should work the way you want! :) It will always be at the bottom of the page. This will always be at the bottom of the viewport, NO QUESTIONS WHAT !: D
#footer{
height: auto;
min-height: 100px;
width: 100%;
background-color: blue;
bottom: 0px;
position: fixed;
display: block;
z-index: 100000;
}
<div id="footer">
</div>
a source to share