css外部宽度的百分比

我需要实现

position:sticky

的文字功能，但我无法使用它，因为它与旧浏览器兼容

我有一个容器，滚动条必须在它的边缘，但是内容只有宽度的80%。 在这个主容器中有两个部分：菜单和内容容器。若我可以使用粘性定位，我会把菜单放在内容容器内，使其100%宽度，并解决问题

但我不能，因此我需要将菜单放在滚动内容容器的外部，在那里，大小问题开始出现： 菜单占主容器宽度的80%，没有滚动条 滚动内容容器内的内容占容器内容的80%，但不计算滚动条

为了演示，这里有一个JSFIDLE

那么，你知道如何将内容的宽度设置为外部宽度的80%，包括滚动条吗

提前谢谢

---

//编辑：更新的小提琴

您可以对菜单的宽度进行

计算吗？在JSFIDLE中，通过将宽度调整为
width:calc（80%-16px），我可以使菜单与容器的宽度相同。假设滚动条的宽度约为16px。因此，菜单和容器都受滚动条宽度的影响，而不仅仅是一个。
我不确定您到底想要什么，但请参见下面的CSS调整

.container{position:relative; margin:10px auto auto auto; width:80%; height:400px; border:1px solid black; background:#eee; }
.menu{background:green; position:absolute; top:0; left:17.7%; width:61.7%; height:30px;z-index:1;  color:yellow;}
.content{width:100%; height:100%; position:relative; margin:auto; overflow-y:scroll;}
.contentin{position:relative; margin:auto; width:80%; background:aqua; padding-top:30px; z-index:0; min-height:100%;}

小提琴出了什么问题？这种行为对于所有普通桌面浏览器都是一样的。FF、Opera、Chrome、Edge。。。。。和位置：sticky不可用，因为旧版本的Edge和所有IES都不支持，您可以使用名为的polyfill。我用过几次，效果很好。@GerardReches菜单的宽度与内容不一样，因为菜单占据了.container的80%，contentin占据了80%的内容-这是.container的100%，但内容的100%是.container-scrollbar@Zorak试图理解那个双关语。因此，您只希望
.menu
与
.content
的宽度相同？很遗憾，这不起作用，我需要与content相同宽度的菜单。另外，尝试调整浏览器的大小。即使它与边缘的距离相同，当您调整窗口大小时，左右空间也会不同-这是因为%始终为%，但滚动条的大小是固定的，因此会影响最终结果。遗憾的是，这是不可能的，因为每个浏览器都有不同的滚动条