0

我正在开发一个基本上包含三个divs页眉、内容和页脚的移动网站。我希望页眉和页脚固定，如果溢出，内容可滚动。现在我的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;
}

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

4

2 回答 2

1

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

这可以使用 jQuery 来完成，或者更好地用于移动设备（因为更小）：zepto.js

希望有帮助

于 2013-08-01T13:39:51.910 回答
-2 
#content{
    top: 8%;
    left: 0;
    bottom: 15%;
    **width: 100%;**
    position: fixed;
    margin: 0;
    padding: 0;
    overflow: auto;
    z-index: 0; 
}

将此突出显示的文本更改为 px 值。% 值根据您的浏览器大小调整对象。

于 2013-08-01T13:34:16.373 回答