隐藏固定定位div后面的滚动条

Question

我正在使用HTML和CSS在Webkit for Android中构建应用程序。我有固定位置标题，有时固定位置页脚（基于模块）。当内容更多时，我不希望滚动条覆盖固定标题。将它隐藏在标题后面也可以。如何在不修复包装器高度或使用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

你说你不想修复<meta name="keywords" content="HTML, Meta Tags, Metadata" /> <meta name="description" content="Profile Share by user." /> <meta name="author" content="I" /> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="http://mydocs.com/"> <meta name="twitter:title" content="User profile"> <meta name="twitter:image" content="<?php echo $SITE_PATH.$meta_userimage;?>" /> <meta property="og:title"content="User profile" /> <meta property="og:image" content="<?php echo $SITE_PATH.$meta_userimage;>"/> 高度，但我认为你应该修复它，因为无法隐藏.wrapper标题元素后面的滚动条

div

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

Answer 2

我不确定我的解决方案是否适合您。您需要设置div =＆＃34;包装器的高度＆＃34;并添加CSS属性overflow-y：

height: calc(100% - (60px + 50px));

示例，其中60px是页眉高度，50px是页脚高度

.wrapper {
    margin-top: 60px;    
    overflow: auto;
    background: yellow;        
    height: calc(100% - (60px + 50px));
    display:block;
}

工作JSFiddle - ＆gt; http://jsfiddle.net/9hy6ybsz/1/

Answer 3

创建一个新的div标签，作为父标签。 并为它应用滚动。 然后创建标题div并保持固定位置。所以你可以滚动固定的DIV！