Flexbox mobile Fußzeile mit Eingabe verursacht virtuelle Tastaturlücke

Ich habe ein extrem einfaches Flexbox-basiertes Layout mit einem div und einer Fußzeile. Die Fußzeile enthält ein Eingabefeld. Immer wenn die Tastatur in der mobilen Safari oder im Chrom erscheint, wird eine kleine Lücke zwischen dem Körper und der Tastatur gezeigt. Kann jemand diese schreckliche Lücke entfernen?Flexbox mobile Fußzeile mit Eingabe verursacht virtuelle Tastaturlücke

Bitte beachten Sie die nachfolgende JS Bin auf Ihrem Gerät: http://jsbin.com/rujexadodu/edit?html,css,js,output

Voll Code

<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>

Quelle

2016-05-31 Cocoa Nub

Was sehen Sie, wenn Sie es inspizieren? –

Welche Version von iOS? Ich sehe das Problem nicht auf meinem iPad –

Ich bin das nicht in der Lage auf meinem iPad zu reproduzieren und nichts springt aus als falsch in deinem Code. Es könnte also nur ein Fehler in jeder Version von Safari sein.

Ich schrieb einen Bibliotheksaufruf iFrame-resizer, der eine iFrame-Höhe auf die Inhaltsgröße abgestimmt hält und die Inhaltshöhe in verschiedenen Browsern so unzuverlässig ausarbeitet, dass ich 10 verschiedene Möglichkeiten zur Verfügung stellen muss.

Es ist keine vollständige Lösung, aber die Hintergrundfarbe der body und html Elemente auf die Fußzeile einzustellen würde es viel weniger auffällig machen.

Quelle

2016-06-04 19:19:53

Ich denke nicht, wenn das wirklich eine Antwort ist! – Trix

Ich kann dies nicht reproduzieren, so muss es ein Browser-Problem sein. Hier sind ein paar Dinge, die helfen können: auf Ihre Version von Safari

Je, müssen Sie Flexbox Präfix:

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

und die Flex-Wert:

-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;

Sie benötigen um flex drei Werte zu geben, damit es auch richtig funktioniert, sind sie grow, shrink und basis, in dieser Reihenfolge. Standardmäßig ist es zulässig, zu wachsen, Schrumpfung zu verbieten und die Größe bei 'auto' 1 0 auto zu beginnen.

Ich denke Flexbox noch funktioniert, wenn Sie nicht flex Werte auf die Kinder gelegt haben, aber verschiedene Browser kann Macken ... so würde ich sicherstellen, dass die Fußzeile

flex: 1 0 auto;

eher hat als

display: flex;

Einige Links, die ich nützlich finden:

Quelle

2016-06-10 08:39:54 Darvanen

Flexbox mobile Fußzeile mit Eingabe verursacht virtuelle Tastaturlücke

Antwort

Verwandte Themen