Question

我正在开发一个基本上有三个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;
}

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

Answer 1

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

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

希望有所帮助

Answer 2

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

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

固定div定位

2 个答案: