最近、App Mobile Web 開発を模倣するために AmazeUI を使用しているときに、よく議論されているposition:fixed 問題に遭遇しました。 Android 2.2以降ではposition:fixedが実装されていますが、iOS 8以下のシステムでは小型キーボードを有効にすると位置ずれが発生します。
以下に示すように:
CSDN の Liu Hua の子供用靴 (http://my.csdn.net/liu__hua) からインスピレーションを得て、現在の立場に比較的完璧なソリューションを見つけました。
<!DOCTYPE html><html lang="zh_cmn"><head><meta charset=utf-8 /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /><title></title><style>.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#99CC00;}.head{top:0;}.foot{bottom:0;}.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#BABABA;}</style></head><body><header class="head">顶部固定区域</header><article class="main" id="wrapper"> <div> <p>当内容欲出隐藏时，灰色区域可上下拖动</p> <p>当内容欲出隐藏时，灰色区域可上下拖动</p> <p>当内容欲出隐藏时，灰色区域可上下拖动</p> <p>当内容欲出隐藏时，灰色区域可上下拖动</p> <p>当内容欲出隐藏时，灰色区域可上下拖动</p> <p>当内容欲出隐藏时，灰色区域可上下拖动</p> <p>当内容欲出隐藏时，灰色区域可上下拖动</p> <p>当内容欲出隐藏时，灰色区域可上下拖动</p> <p>当内容欲出隐藏时，灰色区域可上下拖动</p> <p>当内容欲出隐藏时，灰色区域可上下拖动</p> <p>当内容欲出隐藏时，灰色区域可上下拖动</p> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> </div></article><footer class="foot">底部固定区域</footer></body></html>キーパッドが表示されると、頭と下が自動的にページの一番上と一番下にジャンプします。非表示にした場合、キーボードは頭と底面に固定されます。
内容は http://blog.csdn.net/liu__hua/article/details/40106595 から転載です
記録用。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
