Question

我需要文明地实现position:sticky的功能，但由于与旧浏览器的兼容性，我无法使用它。

我有一个容器，其滚动条必须位于其边缘，但内容仅为宽度的80％。这个主容器里面有两个部分：菜单和内容容器。如果我可以使用粘性定位，我会将菜单放在内容容器中，使其100％宽度并解决问题。

但我不能，所以我需要将菜单放在滚动内容容器之外，并且在那里开始调整大小的问题： MENU占主容器宽度的80％，没有滚动条滚动内容容器中的内容占用容器内容的80％，但不计算滚动条。

为了演示，这里有一个jsfiddle https://jsfiddle.net/ww58qLcw/3/

那么，任何想法，如何将内容宽度设置为外部宽度的80％，包括滚动条？

提前致谢。

//编辑：更新小提琴

Answer 1

你可以在菜单的宽度上做calc吗？在jsfiddle中，我可以通过将宽度调整为width: calc(80% - 16px);来使菜单与容器的宽度相同。假设滚动条宽约16px。因此菜单和容器都受滚动条宽度的影响，而不仅仅是一个。

Answer 2

我不确定您的目的是什么，但请参阅下面的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%;}

css外宽度的百分比

2 个答案: