入力があるFlexboxのモバイルフッターが仮想キーボードのギャップを引き起こす

私は、divとフッターを持つ非常にシンプルなフレックスボックスベースのレイアウトを持っています。フッターには入力ボックスがあります。キーボードがモバイルサファリまたはクロムに登場するたびに、本体とキーボードの間に小さな隙間が表示されます。誰もこの恐ろしいギャップを取り除く方法を知っていますか？入力があるFlexboxのモバイルフッターが仮想キーボードのギャップを引き起こす

お使いのデバイス上でフォローJSごみ箱を参照してください。http://jsbin.com/rujexadodu/edit?html,css,js,output

全コード

<html> 
    <head> 
    <title>Test</title> 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0"/> 
    <style type="text/css"> 

    html { 
    margin: 0; 
    padding: 0; 
    } 

    body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    border: 1px solid pink; 
    } 

    .container { 
    height: 100%; 
    display:flex; 
    flex-direction: column; 
    margin: 0; 
    padding: 0; 
    } 

    .footer { 
    height: 30px; 
    background-color: lightgray; 
    padding: 10px; 
    display: flex; 
    align-items: center; 
    } 

    .content { 
    flex: 1; 
    height: 100%; 
    width: 100%; 
    padding: 10px; 
    } 

    input { 
    width: 100%; 
    } 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
    <div class="content"> 
    This is the body content. 
    </div> 
    <div class="footer"> 
    <input type="text" /> 
    </div> 
    </div> 
    </body> 
    </html>

出典

2016-05-31 Cocoa Nub

あなたがそれを検査するとどうなりますか？ –

iOSのどのバージョンですか？私は彼の問題を私のiPadで見ない –

私は私のiPadでこれを再現することはできないんだけど、何ものように飛び出していませんあなたのコードで間違っています。だから、あなたが持っているSafariのバージョンのバグかもしれません。

私はコンテンツサイズに合わせてiFrameの高さを保ち、さまざまなブラウザでコンテンツの高さを計算するライブラリコールiFrame-resizerを作成しました。これは信頼性が低いため、10通りの方法があります。

これは完全な修正ではありませんが、bodyとhtml要素の背景色をフッターに合わせると目立たなくなります。

出典

2016-06-04 19:19:53

これは本当に答えであるとは思わない！ – Trix

私はこれを再現できませんので、ブラウザの問題でなければなりません。ここは役立つかもしれない物事のカップルです：

サファリのバージョンによっては、フレキシボックスの前に付ける必要があります。

display: -webkit-box; /* Really old */ 
display: -moz-box; /* Firefox */ 
display: -ms-flexbox; /* IE */ 
display: -webkit-flex; /* Chrome & Safari */ 
display: flex;

とフレックス値：あなたが必要

-webkit-box-flex: 1 0 auto; 
-moz-box-flex: 1 0 auto; 
-webkit-flex: 1 0 auto; 
-ms-flex: 1 0 auto; 
flex: 1 0 auto;

flexが正しく動作するための3つの値を与えるには、grow,shrink、およびbasisの順になります。デフォルトでは、grow、disallow shrink、および 'auto'で始まるサイズを許可するのが1 0 autoです。

私はあなたが子供にフレックス値を入れていない場合はフレキシボックスはまだ動作しますが、異なるブラウザは癖を持つことができます...私はフッターが

flex: 1 0 auto;

ではなく

を持っていることを確認してくださいと思います私は便利

display: flex;

いくつかのリンク：

出典

2016-06-10 08:39:54 Darvanen

入力があるFlexboxのモバイルフッターが仮想キーボードのギャップを引き起こす

答えて

関連する問題