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

我正在尝试制作页脚，以便在单击时弹出并填充整个屏幕。我不知道如何做到这一点，所以身高是100％。我可以设置像素，但我希望它填满屏幕，如果一个小窗口打开，不会超过屏幕，如果它是一个大窗口，则会达到一半。HTML弹出页脚问题。 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%; 

}

来源

2013-08-29 Becktor

嘿，如果你想打开的点击这是很遗憾不可能与CSS。你反对使用JavaScript？这里有一个演示与JavaScript（'我包括JavaScript和jQuery解决方案，如果你有一个偏好'）。演示：http://jsfiddle.net/Jag96/6jLL7/如果您使用JavaScript代码，请确保您将脚本放在主体中。 –

也许这样的事情会在你的情况帮：

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

来源

2013-08-29 15:04:22

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

回答

相关问题