html - 绝对定位元素 100% 屏幕宽度

Question

我正在尝试使用此处显示的当前标记制作下拉菜单 100% 屏幕宽度:https://jsfiddle.net/0nd5hL5h/

我已经尝试在 .dropdown-menu 类上使用以下样式，但它会导致水平滚动条，给 body overflow-x:hidden 不是一个选项。

width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;

如果您有任何建议或可以在不更改我当前标记的情况下提供解决方案，请分享!

Answer 1

从下拉列表中删除相对定位。

.dropdown{
    /*position: relative;*/
}

将下拉列表置于正文中心:

.dropdown:hover > .dropdown-menu{
    margin-left: 50%;
    width: 100vw;
    transform: translateX(-50%);
}

哦，我推荐使用 border-box。

*{ box-sizing: border-box; }

编辑:

显然 100vw 占用了 entire viewport width考虑到。其中包括垂直滚动条的宽度。事后看来这是有道理的，但就规范而言似乎是一个糟糕的选择。

无论哪种方式，一个快速的补丁是禁用文档上的 overflow-y。

html{overflow-y: hidden;}