HTML弹出页脚问题。100%高度问题

我试图制作一个页脚，这样当点击时，它会弹出并填满整个屏幕。 我不知道怎么做，所以高度是100%。 我可以用设定的像素来做，但我想让它填满屏幕，如果一个小窗口打开，它不会超过屏幕，如果它是一个大窗口，它会达到一半

如果我将页脚容器设置为高度的100%，内容和动画将到达顶部并向下设置动画。它可以100%显示屏幕

HTML

---

也许这样的事情对你的处境会有帮助：

#footerSlideContainer {
  width: auto;
  height: auto;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 5;
}

---

嘿，如果你想在点击时打开它，不幸的是css不可能。你反对使用javascript吗？下面是一个javascript演示（“我包括了javascript和jQuery解决方案，以防您有偏好”）。演示：如果使用javascript代码，只需确保将脚本放在主体中即可。

#footerSlideContainer {
position: fixed;
bottom: 0;
width: 100%;
z-index: 5;

}
#footerSlideButton {
background: rgba(255,255,255,0.0);
position: absolute;
top: -60px;
width:100%;
height:120px;
border: none;
cursor: pointer;

}
#footerSlideContent {
width: 100%;
height: 0;
background: white;
color: #CCCCCC;
font-size: 0.8em;
border: none;
-webkit-transition: height 700ms ease-in;
-moz-transition: height 700ms ease-in;
-ms-transition: height 700ms ease-in;
-o-transition: height 700ms ease-in;
transition: height 700ms ease-in;
}
#footerSlideContent.open {
height: 100%;

}

#footerSlideContainer {
  width: auto;
  height: auto;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 5;
}