滚动具有固定位置的内容，指定的顶部属性将删除最后一部分

Question

示例：http://jsfiddle.net/3p9urx4y/我正在尝试进行必须放在标题下的移动导航。但是，如果我指定下一个属性：

.list {
   top: 50px;
   overflow-y: scroll;
 }

由于top属性不为零，因此缺少最后50px的内容。我试图使用50px的padding-top创建外部div，但在这种情况下，滚动显示在标题区域，这不是预期的行为。我们可以指定最后一个列表子项的margin-bottom，这有助于：

.item:last-child {
    margin-bottom: 50px;
}

但这是诀窍，我正在努力找到更好的解决方案。我发现了这个问题Scroll part of content in fixed position container但我需要一些不同的东西。我的标题必须修复，当用户点击导航按钮时，导航菜单必须从右侧滑动。

编辑：http://jsfiddle.net/3p9urx4y/新的例子

Answer 1

你的.list高度为100vh，所以无论位置如何，它都会占据屏幕高度的100％。

一种解决方案是将列表高度设置为calc(100vh - 50px)。我编辑了fiddle。

calc函数允许您在指定css属性时执行计算。更多信息here。

Answer 2

给标题一个固定的位置，一个高度和一个宽度，不要忘记给它一个z-index ...那么你下面的导航应该没问题我可以把它更多的建议你需要我#cheers