ios底部輸入框輸入時被隱藏的bug解決
阿新 • • 發佈：2019-02-14
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="no-cache" http-equiv="pragma"> <meta name="screen-orientation" content="portrait" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="full-screen" content="yes"> <meta name="x5-fullscreen" content="true"> <title>底部輸入框被隱藏的bug解決</title> <style> * { padding: 0; margin: 0; } html, body, .container { height: 100%; width: 100%; } .container { display: flex; display: -webkit-flex; flex-direction: column; width: 100%; height: 100%; background: #fff; } .content { flex: 1; -webkit-flex: 1; width: 100%; position: relative; overflow-y: scroll; } .foot { height: 32px; border-top: 1px solid #999; background: #fff; padding: 6px 10px; } .foot input { height: 100%; width: 100%; border: 1px solid #666; outline: 0; } </style> </head> <body> <div class="container"> <div class="content"> <div> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> <p>這裡寫內容</p> </div> </div> <div class="foot"> <input type="text" placeholder="請輸入試試"> </div> </div> </body>