如何使位置绝对尊重垂直视口限制答案

【问题标题】：How to make position absolute respect vertically viewport limits如何使位置绝对尊重垂直视口限制
【发布时间】：2020-10-07 11:55:50
【问题描述】：

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

这是我的表结构：

    <table>
      <tbody>
        <tr>
            <td>
                ...
            </td>
            <td>
                ...
            </td>
            <td>
                ...
            </td>
            <td>
                ...
            </td>
            <td>
                ...
            </td>
            <td>
                ...
            </td>
            <td>
                <svg class="ICON HERE..."></svg>
                <ul class="options">
                    <li><span>Salvar a biblioteca</span></li>
                    <li><span>Adicionar a fila</span></li>
                    <li><span>Adicionar a playlist</span></li>
                    <li><span>Remover dessa playlist</span></li>
                    <li><span>Desabilitar nessa playlist</span></li>
                </ul>
            </td>
        </tr>
      </tbody>
    </table>
    
<style>
table{
    width: 100%;
    table-layout: fixed;
}

table tbody tr td:nth-child(7) {
    width: 50px;
}

tr td:last-child {
    overflow: visible;
    position: relative;
}

table tbody tr td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

table tbody tr td {
    font-size: 16px;
    text-align: left;
    vertical-align: middle;
    padding: 10px 15px;
    color: #bbb;
}

.options{
    border: 1px solid #3D4466;
    border-radius: 14px;
    margin: 10px 0 0 0;
    box-shadow: 0 6px 12px 0px rgba(0,0,0,0.16);
    transition: .5s opacity;
    position: absolute;
    z-index: 2;
    min-width: 175px;
    background: #252A41;
    top: 0;
    left: inherit;
    right: 100%;
    bottom: inherit;
 }
</style>

【问题讨论】：

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

标签： javascript html css

【解决方案1】：

你可以使用

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

并通过适当的垂直对齐为他们设置不同的样式

【讨论】：

【解决方案2】：

你可以试试这个 CSS：

tr:nth-last-child(-n+2){/*This will select last two rows*/
    /*creates a context*/
    position: relative;
}
tr:nth-last-child(-n+2) td:last-child .option{/*this will select the drop down of last two rows*/
    /*positioned within tr*/
    position: absolute;
    bottom: 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 也被忽略。

【讨论】：

【解决方案3】：

回答我自己的问题，我得到了一个使用 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'

（抱歉有任何写作错误，英语不是我的第一语言）

【讨论】：