Javascript 如何使位置绝对垂直于视口限制

我有一个包含一些行的表，每行都有一个“更多选项”按钮，单击该按钮时，会打开一个包含选项的下拉列表。但在最后一行中，“选项”下拉列表仍然会垂直溢出视口。我看到了一个类似的问题，但我没有使用引导。Bootstrap解决方案使用JS使用transform计算和定位元素。但是有没有办法只用CSS就可以做到这一点呢

以下是我的表格结构：

...
...
...
...
...
...

萨尔瓦图书馆
阿迪西奥纳
Adicionar播放列表
删除dessa播放列表
Desabilitar nessa播放列表

桌子{
宽度：100%；
表布局：固定；
}
表tbody tr td:n个孩子（7）{
宽度：50px；
}
tr td：最后一个孩子{
溢出：可见；
位置：相对位置；
}
表tbody tr td{
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}
表tbody tr td{
字体大小：16px；
文本对齐：左对齐；
垂直对齐：中间对齐；
填充：10px 15px；
颜色：#bbb；
}
.选项{
边框：1px实心#3D4466；
边界半径：14px；
利润率：10px0；
盒影：0 6px 12px 0px rgba（0,0,0,0.16）；
过渡区：5s不透明度；
位置：绝对位置；
z指数：2；
最小宽度：175px；
背景#252A41；
排名：0；
左：继承；
右：100%；
底部：继承；
}

您可以使用

.options:not(:nth-last-child(-n+2)) {
    //style here
}

并使用适当的垂直对齐设置不同的样式

您可以尝试以下CSS：

tr:n最后一个子项（-n+2）{/*这将选择最后两行*/
/*创建上下文*/
位置：相对位置；
}
tr:nth last child（-n+2）td:last child。选项{/*这将选择最后两行的下拉列表*/
/*位于tr内*/
位置：绝对位置；
底部：0；
}

在这里，您可以将

2

替换为

3

，以获取最后3个元素

发生了什么事？

实际上，这些选择器就像一个循环，贯穿所有元素。此处

n

指定我需要所有元素。公式

-n+2

的工作原理如下：

假设我们有10个元素

n={0,1,2,3…，9}

-n+2=2,1,0，-1，-2

对于n的每个值

---

忽略负值。2是倒数第二个元素，1是最后一个元素，0也被忽略。

回答我自己的问题，我得到了一个使用JS对我有效的解决方案，可能对将来的人有用。。。基本上，我通过获取元素及其父元素的顶部和高度来检查元素是否溢出父元素。我把他的高度和他的顶部相加，得到这个元素底部的Y轴。如果该元素的Y轴大于其父元素的Y轴，则该元素将溢出。要解决这个问题，只需将父元素定位为相对元素，并在子元素上添加底部：0

const ulBottom = ul.getBoundingClientRect().top + ul.offsetHeight
const sectionBottom = section.getBoundingClientRect().top + section.offsetHeight
if(ulBottom > sectionBottom) ul.style.bottom = '0px'

---

（很抱歉出现任何书写错误，英语不是我的第一语言）

你能提供代码吗。请提供最低限度的代码来重现你所面临的问题，以便人们能更好更快地帮助你隐藏你的视口垂直滚动条吗？不，我没有隐藏它。