CSSのネガティブボトムプロパティを設定するとページ下部に表示されます

Question

ページの下部にhtml要素の一部を隠そうとしていますが、CSS3トランジションを介してクリックすると全体が上にスライドして表示されます。

通常、ページの下に広がる要素の一部は隠されています。しかし、ページの要素がその要素の一部を示すように拡張されているだけです。

これを修正するにはどうすればよいですか？

HERESに私のコード：

HTML：

<div class="closed" id="slidePanel"> 
    <div id="slidePanel-tab"> 
      Stuff 
    </div> 
    <div id="slidePanel-contents"> 
     <ol> 
      <li>stuff</li> 
      <li>stuff</li> 
     </ol> 
    </div> 
</div> 

CSS：

#slidePanel { 
    background-color: #e9e9e9; 
    position: absolute; 
    bottom: 0; 
    left: calc(50% - 66px); 
    z-index: 2; 
    min-width: 10%; 
    min-height: 20%; 
    border: 2px solid rgba(0, 0, 0, .05); 

    -webkit-transition: bottom 0.5s ease-in-out; 
    transition: bottom 0.5s ease-in-out; 
} 

#slidePanel.closed { 
    bottom: calc(-20% + 20px); 

    -webkit-transition: bottom 0.5s ease-in-out; 
    transition: bottom 0.5s ease-in-out; 
} 

#slidePanel-tab { 
    background-color: #d0d0d0; 
} 

$("#slidePanel-tab").click(function (evt) { 
    $("#slidePanel").toggleClass("closed"); 

    evt.preventDefault(); 
}); 

相続人例： https://jsfiddle.net/sd306pyr/

Answer 1

あなたはfixedに、要素の位置を設定することができます。

#slidePanel { 
background-color: #e9e9e9; 
position: fixed; 
bottom: 0; 
left: calc(50% - 66px); 
z-index: 2; 
min-width: 10%;/*30%; */ 
min-height: 20%; 
border: 2px solid rgba(0, 0, 0, .05); 
-webkit-transition: bottom 0.5s ease-in-out; 
transition: bottom 0.5s ease-in-out; 
} 

がフィドルを参照してください：あなたの質問にコメントで指摘したようにhttps://jsfiddle.net/sd306pyr/2/

あなたはまたhiddenに要素のコンテナのoverflowを設定することができます。どのようなものであれ、DOM全体のレイアウトがうまくいきます。

Answer 2

あなたが表示後なしへの移行が行われ、隠されたに体オーバーフローを設定されている設定のJavaScriptスクリプトを作成する必要があります。