絶対位置指定を使用しているときにフル高さを表示できません

Question

私は蚊帳にポップアップがあります。絶対配置でdivに配置すると、ポップアップの一部だけが表示されます。私のjsfiddleはここにあります。これは私の質問hereのフォローアップです。私がその質問を投稿したとき、既にコードが絶対配置されているdivでコードが使用されることはわかりませんでした。そのスレッドに掲載された修正では、ポップアップがうまく表示されていることがわかります。それと私の新しいコードとの唯一の違いは、2つの周囲のdivの追加です。彼らは220pxの高さの設定を持っていると私はそれがポップアップを制限していることがわかりますが、私はそれを修正する方法が表示されません。これらの初期高さの設定はそのままで、削除したり変更することはできません。誰か助けてくれますか？

<style> 
    #ds-holder { 
    position: relative; 
    margin: 0 auto; 
    width: 300px; 
    height: 220px; 
    overflow: hidden; 
    } 
    .ds-container { 
    top: 0px; 
    left: 0px; 
    width: 140px; 
    height: 220px; 
    position: absolute; 
    overflow: hidden; 
    } 
    #dsspan{ 
    background: none repeat scroll 0 0 #F8F8F8; 
    border: 5px solid #DFDFDF; 
    color: #717171; 
    font-size: 13px; 
    height: auto; 
    width: auto; 
    letter-spacing: 1px; 
    line-height: 30px; 
    margin: 0 auto; 
    position: absolute; 
    text-align: center; 
    text-transform: uppercase; 
    top: 80px; 
    left:30px; 
    display:none; 
    padding:0 20px; 
    } 
    #dsspan:after{ 
    content:''; 
    position:absolute; 
    bottom:-10px; 
    height:0px; 
    } 
    .ds {border:1px solid red} 
    .ds:hover #dsspan { display:block; } 
    </style> 

    <div id="ds-holder"> 
     <div class="ds-container"> 
     <div class="ds"> 
      <span id="dsspan"> 
      This line is longer than the rest. 
      <ul> 
      <li>Text</li> 
      <li>Text</li> 
      <li>Text</li> 
      <li>Text</li> 
      <li>Text</li> 
      </ul> 
      </span> 
      <a href="example.com">Hover Here</a> 
     </div> 
     </div> 
    </div> 

Answer 1

あなたは全幅を作るために一緒に絶対位置を使用left: 0とright: 0で

を試すことができます。