css - 固定div定位

Question

我正在开发一个基本上具有三个 div(页眉、内容和页脚)的移动网站。我希望页眉和页脚固定，内容在溢出时可滚动。现在我的 CSS 是:

#header{
    top: 0;
    left: 0;
    height: 8%;
    width: 100%;
    position: fixed;
    text-align: center;
    text-height:font-size;
}

#content{
    top: 8%;
    left: 0;
    bottom: 15%;
    width: 100%;
    position: fixed;
    margin: 0;
    padding: 0;
    overflow: auto;
    z-index: 0; 
}

#footer{
    height: 15%;
    width: 100%;
    position: fixed;
    text-align:center;
    bottom: 0;
    left: 0;
    z-index: 1;
}

这非常有效，但是在内容中我有一些文本字段，而在移动设备上，当键盘弹出时页眉和页脚也会被向上推，使内容字段太小。有没有办法让它们保持固定，但在输入文本时不会让它们被推高？

Answer 1

每次文本字段获得焦点时，您都​​可以使用 JavaScript 隐藏页脚，因为网站变小这一事实已硬编码在操作系统中(负责显示键盘)

这可以使用 jQuery 来完成，或者对于移动设备更好(因为更小):zepto.js

希望对你有帮助