求助：Kebab菜单靠近容器底部时自适应调整对齐方式

我用Alpine.js在项目里加了Kebab菜单，运行正常，但想实现一个对齐逻辑：当菜单靠近容器底部时自动调整对齐方式，避免底部的菜单超出屏幕，用户还要滚动才能看全。目前只设置了position: relative（项目基于Django模板，用TailwindCSS，非Tailwind方案也能接受），相关代码如下：

<div 
    class="relative w-2 mx-1"
    x-data="{ open: false, color: false }" 
    @keydown.escape="open = false" 
    @click.away="open = false"
>
<!-- 菜单按钮及下拉内容补充示例：
<button @click="open = !open">⋮</button>
<div x-show="open" class="absolute ...">菜单选项</div>
-->
</div>

效果截图：

解决方案 #

TailwindCSS + Alpine.js 动态对齐实现 #

核心思路是通过Alpine.js计算菜单位置，判断是否会超出视口底部，动态切换下拉菜单的展开方向：

<div 
    class="relative w-2 mx-1"
    x-data="{ 
        open: false, 
        color: false,
        // 判断是否需要向上展开菜单
        get shouldAlignUp() {
            if (!this.$refs.menu) return false;
            const menuRect = this.$refs.menu.getBoundingClientRect();
            // 预留10px边距，避免菜单贴紧屏幕边缘
            return menuRect.bottom > window.innerHeight - 10;
        }
    }" 
    @keydown.escape="open = false" 
    @click.away="open = false"
>
    <button @click="open = !open" class="cursor-pointer">⋮</button>
    <!-- 下拉菜单：根据判断结果切换定位类 -->
    <div 
        x-show="open"
        x-ref="menu"
        class="absolute right-0 w-48 bg-white shadow-lg rounded-md py-1 z-10"
        :class="shouldAlignUp ? 'bottom-full mb-1' : 'top-full mt-1'"
    >
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">选项1</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">选项2</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">选项3</a>
    </div>
</div>

非TailwindCSS 原生实现 #

如果不用Tailwind，可通过自定义CSS结合Alpine.js动态类绑定完成：

1. 自定义CSS样式：

.kebab-menu {
    position: relative;
    width: 16px;
    margin: 0 8px;
}

.dropdown-menu {
    position: absolute;
    right: 0;
    width: 192px;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 4px;
    padding: 4px 0;
    z-index: 100;
}

/* 向上展开类 */
.dropdown-menu.align-up {
    bottom: 100%;
    margin-bottom: 4px;
}

/* 向下展开类 */
.dropdown-menu.align-down {
    top: 100%;
    margin-top: 4px;
}

.dropdown-item {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: inherit;
}

.dropdown-item:hover {
    background-color: #f3f4f6;
}

2. 对应HTML结构：

<div 
    class="kebab-menu"
    x-data="{ 
        open: false, 
        color: false,
        get shouldAlignUp() {
            if (!this.$refs.menu) return false;
            const menuRect = this.$refs.menu.getBoundingClientRect();
            return menuRect.bottom > window.innerHeight - 10;
        }
    }" 
    @keydown.escape="open = false" 
    @click.away="open = false"
>
    <button @click="open = !open" class="cursor-pointer">⋮</button>
    <div 
        x-show="open"
        x-ref="menu"
        class="dropdown-menu"
        :class="shouldAlignUp ? 'align-up' : 'align-down'"
    >
        <a href="#" class="dropdown-item">选项1</a>
        <a href="#" class="dropdown-item">选项2</a>
        <a href="#" class="dropdown-item">选项3</a>
    </div>
</div>

逻辑说明 #

• 用x-ref="menu"获取下拉菜单的DOM节点
• 通过getBoundingClientRect()获取菜单的视口位置，判断是否超出屏幕底部
• 动态切换菜单的定位类，自动适配向上/向下展开

内容的提问来源于stack exchange，提问作者michjnich