javascript - 设置具有绝对位置的屏幕宽度的子宽度最大值

Question

我有 3 个具有动态宽度和位置的下拉菜单，如下所示

我想让每个下拉宽度从当前位置开始到屏幕宽度的最大值，像这样从右侧离开 10px。

下拉列表相对于其父容器是绝对定位的。我想制作一个 css 类并应用每个下拉列表，这样它就可以像上面的那样，最大屏幕宽度从中减去 10px。

通过搜索 SO，我发现了很多问题，但无法解决我的问题。我不想用 Javascript 做任何事，只想用纯 CSS。

许多 SO 问题建议使用 css 的 vw 单元，但我不明白如何在这个问题中使用 vw。非常感谢您专家的任何帮助。谢谢。

有些人建议这样做但行不通

width:100vw;
margin-left:100%;
transform: translate(-50vw);

因为如果我想在屏幕中央下拉，上面的方法可能很好，但这里的情况是从父位置开始的。我已经尝试用 margin-right 替换它并尝试了尽可能多但没有用。

Answer 1

我不认为这可以用一个类来实现，你应该为每个菜单项使用一个类。

您可以先为顶部菜单项设置固定宽度，例如 100px。因此，下一个元素将距离页面左侧 100 像素。

现在你必须用 100vw 计算 100% 的视口(viewport)，然后从前面的元素中减去像素，如果元素菜单之前有 2 个元素，那么它将是 200 像素.

这个减法可以像这样用 calc 进行:width: calc(100vw - 200px);

这种技术的结果是这样的:

`

这是一个例子:https://jsfiddle.net/52jab0t9/

我希望这对你有帮助，请原谅我的英语不好:)

PD:我从这里获取菜单代码:http://www.cssscript.com/demo/simple-clean-pure-css3-dropdown-menu/