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

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

1 个答案: