Question

我有一个“弹出”表，它是一个固定元素。该表有时会很高，以适应某些屏幕，因此我将overflow设置为auto。但是，滚动条似乎与弹出表分离，因为它只占整个“毯子”（覆盖屏幕）宽度的80％。有没有办法让滚动条直接连接弹出表的右边没有间隙？这是一个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%;
         width:80%;
         background-color:#fff;

}

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

Answer 1

添加以下内容似乎可以解决问题......

#blanket {
    width:80%;
    left:50%;
    margin-left:-40%;
}

#popUpTable{
    width:100%;
}

小提琴：http://jsfiddle.net/e2dx5hjn/

获取滚动条以附加到正确的div

1 个答案: