Question

我有一个＆＃34;弹出＆＃34;表是固定元素。该表有时会很高，以适应某些屏幕，因此我将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; left:0; right:0;，这使得它的宽度为100％。

您应该删除right:0，并在左侧设置一些padding以显示＆＃34;背景资料＆＃34;内容。

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

Answer 2

IE目前不支持此功能，但添加此功能表可以在Firefox Chrome和Safari中执行您想要的操作，并具有适当的中心位置。

width:-moz-fit-content;
width:-webkit-fit-content;
margin:auto;

在此处查看： http://jsbin.com/yetoto/1/watch?css,output

当width不是auto时，将margin-left和margin-right设置为自动会将事物置于中心位置。但是，您需要一个适合您内容的width值，而fit-content会在支持它的浏览器中执行此操作。

偏移滚动条显示在子div旁边

2 个答案: