절대 위치 지정을 사용할 때 전체 높이를 표시 할 수 없음

Question

나는 이끼에 대한 팝업을 가지고 있습니다. 절대 위치 지정을 사용하여 div에 배치하면 팝업의 일부만 표시됩니다. 내 jsfiddle 여기에 있습니다. 이 질문에 대한 후속 조치입니다 here. 내가 그 질문을 올렸을 때, 이미 코드가 절대 위치에있는 div에서 코드가 사용된다는 것을 몰랐습니다. 해당 스레드에 게시 된 수정 프로그램에서 팝업이 잘 표시되는지 확인할 수 있습니다. 그것과 나의 새로운 코드 사이의 유일한 차이점은 두 개의 주변 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을 시도 할 수 있습니다.