javascript - 将滚动条隐藏在固定定位的 div 后面

Question

我正在使用 HTML 和 CSS 在 Webkit for Android 中构建一个应用程序。我有固定位置的页眉，有时还有固定位置的页脚(基于模块)。当内容比较多的时候，不想让滚动条覆盖在固定的header上。将它隐藏在页眉后面也可以。如果不固定包装器的高度或使用 height: calc(); 包装器的 CSS，我该如何实现这一点？

我希望应用滚动条是这样的:

相反，现在是这样的:

示例代码如下:

.header {
position: fixed;
background-color: red;
left: 0;
top: 0;
width: 100%;
z-index: 999; 
height: 60px;
}
.wrapper {
    padding-top: 60px;
    min-height: 100%;
    height: auto;
}
.footer {
    position: fixed;
    background-color: grey;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
}

jsfiddle

Answer 1

你说你不想固定 .wrapper 的高度，但我认为你应该固定它，因为没有办法将这个滚动条隐藏在 div< 后面 标题元素。

.wrapper {
    margin-top: 60px;
    min-height: 100%;
    height: 320px;
    overflow-y: auto;
}

演示:http://jsfiddle.net/9hy6ybsz/4/