css align footer bottom without using position:absolute - html

Question

I have a website made of "pages" (100% height on visible area). Please look at the following css:
html {
height: 100%;
}
body{
height:100%;
margin: 0 auto;
}
.page{
height: 100%;
margin: 0 auto;
min-height: 700px;
min-width: 1024px;
}
.content {
margin: 0 auto;
text-align: center;
height: 100%;
min-height: 800px;
min-width: 1024px;
}
.footer {
width: 100%;
min-height: 200px;
background-color:red;
}
.hidden{
width: 100%;
height: 500px;
background-color:blue;
}
.image {
display:block;
height: 100px;
width: 100px;
}
And this is the code:
<div class="page">
<div class="content">
<img class="image" src="img/image.png1">
<img class="image" src="img/image.png2">
<img class="image" src="img/image.png3">
<div class="hidden" style="visibility:hidden">
</div>
</div>
<div class="footer">
</div>
</div>
I need:
1) the footer to be aligned bottom when the page loads
2) after some seconds, with javascript I show the hidden div, and the footer must slide down.
I can't obtain these two things at the same time, because I can obtain 1) with
footer {
position: absolute;
bottom: 0;
}
but in this way when I show the hidden div it overlaps the footer.
Otherwise if I remove this last code, when the hidden div appears the footer slides down correctly, but when I load the page the footer is not at the bottom.
Does someone have any advice?

Answer 1

How about;
position: relative;
bottom: -100%;

Answer 2

What worked for me is the following code:
.footer {
width: 100%;
min-height: 200px;
background-color:red;
margin-top: 100vp;
}
The thing is that the footer is not seen until the user scrolls, you could
give it a less than a 100vp margin-top but it depends on the footer height which can change.
NOTE: vp means viewport height

Answer 3

You should try with this code:
html {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}