我正在尝试制作页脚,以便在单击时弹出并填满整个屏幕。我不知道该怎么做,所以高度是 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%;
}