代码之家 › 专栏 › 技术社区 › Derk Jan Speelman

表内的绝对元素导致表启用溢出-y:以某种方式滚动

css-tables overflow scroll css html

Derk Jan Speelman · 技术社区 · 9 年前

我有一张有一些服务的桌子。每个服务都有一个“?”-图标,访问者可以单击该图标阅读有关该服务的更多信息。

表的包装有:

@media all and (max-width: 560px) {
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

因此,您可以轻松地在移动设备上向右或向左滚动(因为对于小屏幕来说,表格太宽)。

但问题是:一些弹出窗口(特别是最后一个)导致表的包装器垂直滚动,而它没有“overflow-y:scroll”!

由于弹出窗口,会出现一个滚动条,您可以在表格内滚动……这不是我想要的:( 因此,当您在移动设备上查看此表时,您无法再向下滚动页面,因为该表挡住了您的视线。

我想要的是: 弹出窗口显示“z-index:1;”因此弹出窗口将位于几乎所有其他元素之上。因此,弹出窗口也应该悬停在下面(和表外)的元素上方。表的高度基本上应该与包装器的高度相同,但弹出窗口需要能够越过包装器(和表)的边缘。我认为这是由于它的“位置:绝对但事实并非如此。

非常难看的解决方案:将表的底部边距设置为等于或大于最后一个也是最高的弹出窗口,这样表包装器就不需要垂直滚动条。但就像我说的:真的很难看。

看见

更新 (小调) :

3 回复 | 直到 9 年前

moolsbytheway 9 年前

EDIT2(编辑2) 看看这个 jsFiddle 我认为它现在正在工作:)

编辑

如果要隐藏屏幕上显示的垂直滚动条 width 是< 560px 然后您可以使用 overflow-y:hidden 并在表格后面的其他元素上显示弹出窗口,您可以设置 height:100% 在你身上 @media

@media all and (max-width: 560px) {
  .table-wrapper {
    overflow-x: auto;
    overflow-y:hidden;  // <-- 
    height:100%;        // <--
    -webkit-overflow-scrolling: touch;
  }
}

要隐藏表后的空格,不能将下一个元素设置为 消极的 margin-top 这样地

div_after_the_table {
margin-top:-75px;
}

RamenChef 9 年前

div .more-info {
    position: static;
}

必须定位绝对弹出窗口的直接父级 static 为了把它从表格中取出,请滚动。

我一直在为同样的问题努力,但我的问题仍未解决。我已设置图标 position:absolute 将其显示在第一列的右侧,而不将其环绕到下一行。但是,当父对象被定位为静态时,图标的弹出定位会出现问题。

kodt202 9 年前

如果你用另一个div包装你的桌子 position: absolute; ,弹出窗口将能够在溢出外部显示。