Fußzeile wird hochgedrückt, wenn die Tastatur geöffnet ist HTML/CSS?

Question

also alles, was ich versuche hier zu tun ist eine einfache Fußzeile auf meiner Website hinzufügen, die perfekt funktioniert, wenn auf dem Desktop geöffnet, aber wenn auf Tablet oder Handy, wenn die Tastatur geöffnet ist, wie sie einloggen die Fußzeile bewegt sich die Seite nach oben die Tastatur. Gibt es eine Methode, dies zu beheben, irgendwelche Ideen?

CSS

#footer { 
 
    width: 100%; 
 
    background-color: #4c66a4; 
 
    color: #fff; 
 
    position: absolute; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    text-align: center; 
 
}

<div id="footer"> 
 
    <p>&copy; 2018 SulmaxCP. All Rights Reserved.</p> 
 
</div>

Answer 1

Versuchen Sie es mit einem Wrapper innerhalb des Body-Tags.

html,body{ 
 
    height:100%; 
 
} 
 
.wrapper { 
 
    min-height: 100%; 
 
    position: relative; 
 
    padding-bottom:90px; /* footer's height */ 
 
} 
 
#footer { 
 
    width: 100%; 
 
    background-color: #4c66a4; 
 
    color: #fff; 
 
    position: absolute; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    text-align: center; 
 
}

<div class="wrapper"> 
 
<main> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis necessitatibus earum tenetur itaque ducimus atque nam vitae ab non quasi natus quam, cum hic quod possimus quibusdam inventore minima temporibus.</div> 
 
    <div>Optio inventore delectus quas rerum mollitia eum, repellendus voluptatum! Quos, quas nobis delectus, ipsa tempore reiciendis dolore numquam sequi tempora, nostrum in mollitia laboriosam odio labore voluptatem sint. Similique, aliquam.</div> 
 
    <div>Sapiente quisquam vitae alias in nesciunt numquam id, distinctio! Doloribus error mollitia, optio debitis ratione quaerat maiores odio nostrum autem commodi tempora magnam, quos necessitatibus nobis aperiam consequuntur perspiciatis deserunt.</div> 
 
    <div>Hic facere nam aliquam tenetur officiis, ratione, sunt aliquid perspiciatis distinctio laborum perferendis nisi ullam omnis incidunt, quasi illo corrupti, dolores eius vero ipsum tempore. Tempora consequatur necessitatibus, saepe assumenda.</div> 
 
    <div>Eveniet, odit deleniti neque voluptates soluta architecto, quae aspernatur aut minima rerum itaque nobis distinctio ex culpa! Dolore sit vel mollitia aspernatur distinctio voluptatibus! Iste perspiciatis, aliquid a doloribus et.</div> 
 
    <div>Molestias, ducimus! Magni doloribus fugiat praesentium dolore minus perferendis, reprehenderit voluptatibus fuga, rerum quam eveniet, odit ut eaque, repellat provident aperiam repudiandae. Quos porro eveniet, dignissimos non quibusdam provident eligendi!</div> 
 
    <div>Ducimus unde ea iste alias fugiat debitis natus illo eligendi! Nisi dolor esse totam optio, tenetur distinctio, sequi inventore eaque iure earum suscipit quam ipsam qui quae molestias id expedita!</div> 
 
    <div>Veritatis delectus, in laudantium. Excepturi, deserunt! Ullam voluptatem aliquid doloribus ab, officia veniam maiores magnam maxime. Vero esse non dicta autem, aliquam eos dolore harum sed incidunt architecto placeat eaque!</div> 
 
    <div>Hic veniam porro autem quia, commodi provident sunt, at tempore libero, consequuntur, accusamus. Vero illo molestias nam, velit hic iure, a sequi, explicabo ipsum voluptates numquam modi dolorum rem culpa!</div> 
 
    <div>Iusto a cum nihil eos atque, impedit, debitis quis dolor consectetur ratione ipsam nisi recusandae temporibus possimus. Non, natus a, consequuntur provident facilis nemo assumenda dolorum vitae, eligendi et harum.</div> 
 
</main> 
 
<div id="footer"> 
 
    <p>&copy; 2018 SulmaxCP. All Rights Reserved.</p> 
 
</div> 
 
</div>

Die Sache ist die, dass Fußzeile seine Position von Body-Tag beziehen und wenn Tastatur Körper Höhenänderungen und Fußzeile erhalten auf der Tastatur angezeigt wird.

Answer 2

Sie nicht reparieren kann, weil es nichts falsch, Ihre Fußzeile genau das tut, was Sie haben sagte es zu tun.

Ihre CSS-Regel für die Fußzeile besagt, dass sie immer an den unteren Rand des Fensters angehängt werden soll. Selbst wenn die Tastatur eines Mobilgeräts sichtbar ist, befindet sich die Oberseite der Tastatur jetzt unten im Fenster.

Wenn Sie möchten, können Sie entweder entfernen Sie den position:absolute Wert oder es nur zu position:fixed

Answer 3

Sie können die Fußzeile verstecken ändern, wenn Sie bei der Eingabe konzentrieren abgelegt und zeigen wieder Fußzeile auf unscharf Eingang abgelegt jquery verwenden.

$("#inputID").focus(function() { 
    $("#footer").hide(); 
}); 

$("#inputID").focusOut(function() { 
    $("#footer").show(); 
}); 

Answer 4

Dies ist eine preiswerte Hacky fix, aber:

CSS:

@media screen and (max-width: 800px) { 

    .hide-footer { 
     display: none; 
    } 

} 

jQuery

$('input').focus(function() { 
    $('footer').addClass('hide-footer'); 
}); 

$('input').focusout(function() { 
    $('footer').removeClass('hide-footer'); 
}); 

Diese die Klasse so schnell .hide-footer in Ihre Fußzeile hinzufügt, wie Sie konzentrieren auf einem Eingabe-Tag. Außerdem wird die Fußzeile nur dann ausgeblendet, wenn die Bildschirmbreite weniger als 800 Pixel beträgt (Sie sollten sie anpassen, aber dies sollte mobile Geräte abdecken).