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

Question

我正在尝试制作页脚，以便在单击时弹出并填满整个屏幕。我不知道该怎么做，所以高度是 100%。我可以用设置的像素来做到这一点，但我希望它能填满屏幕，如果打开的是小窗口，则不超过屏幕；如果打开的是大窗口，则不超过屏幕一半。

如果我将页脚容器设置为高度的 100%，则内容和动画将到达顶部并向下移动。它占据了 100% 的屏幕。

HTML

    <div id="footerSlideContainer">
            <div id="footerSlideButton"></div>
            <div id="footerSlideContent">


                <div id="footerSlideText">
                    <h3>blabla</h3>
                    <p>blablablabla.</p>
                    <ul>
                        <li>bla</li>
                        <li>Bla</li>
                        <li>bla</li>
                        <li>blabla</li>
                    </ul>
                    <p>bedst i test</p>
                </div>
            </div>
        </div>

CSS

#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%;

}

Answer 1

也许这样的事情会对你的情况有所帮助:

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