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

Question

我有3个下拉菜单，动态宽度和位置就像这些

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

下拉列表位于其父容器的绝对位置。我想创建一个单独的css类并应用每个下拉列表，以便它可以像上面那样，最大屏幕宽度减去10px。

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

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

有人建议这样做但不起作用

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

因为如果想在画面的中心做下拉所以上面好，但是这里情况从父母位置开始。我试过用margin-right替换它，尽可能多地尝试但没有用。

Answer 1

我不认为这可以用一个班级来完成，你应该为每个菜单项使用一个班级。

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

现在你必须使用100vw计算100％的视口，然后从前面的项中减去像素，如果项目菜单有2个项目，那么它将是200像素。

这种减法可以用这样的方法进行：width: calc(100vw - 200px);

这种技术的结果将是这样的：

`

以下是一个示例：https://jsfiddle.net/52jab0t9/

我希望这可以帮助你，原谅我的英语不好：）

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