Css 固定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;
}

这很好，但是在内容中我有一些文本字段，在移动设备上，当键盘弹出时，页眉和页脚也会向上推，使得内容字段太小。在输入文本时，是否有任何方法使它们保持固定，但不使它们被推高

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

将此突出显示的文本更改为px值。

---

%值根据浏览器大小调整对象。

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

这可以使用jQuery来完成，对于移动设备来说甚至更好，因为它更小：zepto.js

---

希望这有帮助

改变宽度不会对我有任何帮助。我必须更改高度，如果我将高度设置为px值而不是%，那么它在多个屏幕大小不同的设备上看起来就不对了