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％高度問題

回答

相關問題