html - 偏移滚动条出现在子 div 旁边

Question

我有一个“弹出式”表格，它是一个固定元素。该表有时太高以适应某些屏幕，因此我将 overflow 设置为 auto。然而，滚动条似乎与弹出表格分离，因为父 div 是屏幕的宽度而表格较小。有没有办法让滚动条直接连接到弹出式表格的右侧而没有间隙，同时保持表格居中？这是一个demo告诉你我的意思。谢谢。

html

<div id = "blanket">
  <div>
    <table align = "center" id = "popUpTable">
      <tr>
        <td>fixed pop uptable</td>
      </tr>
      <tr>
        <td>one</td>
      </tr>
      <tr>
        <td>two</td>
      </tr>
      <tr>    
        <td>three</td>
      </tr>
      <tr>    
        <td>four</td>
      </tr>
    </table>
  </div>    
</div>

<div>background stuff<br>background stuff<br>background stuff<br></div> 

CSS

#blanket{
      position:fixed;
      top:0%;
      bottom:0%;
      left:0%;
      right:0%;
      background-color:rgba(255,555,255,0.5); 
      overflow-y:auto;
}

#popUpTable{
         border:1px solid gray;
         margin-top:2%;
         background-color:#fff;

}

#popUpTable td{
            height:150px;
            text-align:center;
            border:1px solid gray;
}

Answer 1

问题是position:fixed;左:0； right:0;，这使它成为 100% 宽度。

您应该删除 right:0，并在左侧设置一些 padding 以显示“背景内容”内容。

更新的演示: http://jsfiddle.net/ssjkgb22/33/