滚动以固定位置和指定的顶级属性滚动滚动，将掉落最后一部分

Question

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

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

缺少内容的最后50px，因为 top 属性不是零。我试图用50px的填充顶部将外部div制作，但是在这种情况下，滚动出现在标题区域，这不是预期的行为。我们可以指定最后一个列表的孩子的 raingotom ，这有帮助：

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

但这是诀窍，我正在尝试找到更好的解决方案。我发现了这个问题滚动的内容部分在固定位置容器中，但我需要一些不同的东西。我的标头必须固定，当用户单击导航按钮时，导航菜单必须从右侧滑动。

编辑： http://jsfiddle.net/3p9urx4y/new Example

Answer 1

您的 .list 具有高度：100VH ，因此，无论其位置如何。

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

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

Answer 2

给标头一个固定，高度和宽度的位置，别忘了给它一个z索引...然后你的导航在下方，我可以扔掉它有更多建议，您需要我#Cheers