Html css对齐页脚底部而不使用位置：绝对

我有一个网站的“网页”（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>

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

position: relative;
bottom: -100%;

---

您应该尝试使用以下代码：

html {
    position: relative;
    min-height: 100%;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

---

对我有效的是以下代码：

.footer {
    width: 100%;
    min-height: 200px;
    background-color:red;
    margin-top: 100vp;
}

问题是，在用户滚动之前，不会看到页脚，您可以 给它一个小于100vp的页边顶部，但它取决于页脚高度，页脚高度可以改变

---

注意：vp表示视口高度

您可以设置JSFIDLE或codepen吗？只需在使div可见的同时删除页脚样式。这是否符合向上投票的条件？我认为有很多解决方案，但如果不看到适当的设置，我无法真正描述此问题，以了解什么样的交互最适合此确定我创造了一把小提琴：在任何其他情况下，这都是绝对完美的答案，但我来到这里完全没有得到这个标准答案（正如标题中所说：无位置：绝对）

.footer {
    width: 100%;
    min-height: 200px;
    background-color:red;
    margin-top: 100vp;
}