html - css 在不使用位置 :absolute 的情况下对齐页脚底部

Question

我有一个由“页面”组成的网站(可见区域的高度为 100%)。请查看以下 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;
}

这是代码:

  <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>

我需要:

1) 页面加载时底部对齐的页脚
2) 几秒钟后，我用 javascript 显示隐藏的 div，页脚必须向下滑动。

我不能同时获得这两个东西，因为我可以用1)获得

footer {
    position: absolute;
    bottom: 0;
}

但是当我显示隐藏的 div 时，它会与页脚重叠。否则，如果我删除最后一个代码，当隐藏的 div 出现时，页脚会正确向下滑动，但当我加载页面时，页脚不在底部。有人有什么建议吗？

Answer 1

怎么样;

position: relative;
bottom: -100%;