css - 使用绝对定位时无法显示全高

Question

我在 mosueover 上有一个弹出窗口。当放在一个绝对定位的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 一起构成全宽。