Поэтому все, что я пытаюсь сделать здесь, это добавить простой нижний колонтитул на свой сайт, который отлично работает при открытии на рабочем столе, но на планшете или мобильном телефоне, когда клавиатура открыта, например, когда они входят в систему, нижний колонтитул перемещается вверх по странице чуть выше клавиатуры . Есть ли способ исправить это, есть идеи?
CSS
#footer {
width: 100%;
background-color: #4c66a4;
color: #fff;
position: absolute;
left: 0px;
bottom: 0px;
text-align: center;
}<div id="footer">
<p>© 2018 SulmaxCP. All Rights Reserved.</p>
</div>
5 ответов
Попробуйте использовать обертку внутри тега body.
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>© 2018 SulmaxCP. All Rights Reserved.</p>
</div>
</div>Дело в том, что нижний колонтитул, связывающий его позицию с тегом body, и при появлении клавиатуры изменяется высота тела, и нижний колонтитул попадает на клавиатуру.
Это дешевое хакерское исправление, но:
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');
});
Это добавит класс .hide-footer в нижний колонтитул, как только вы сосредоточитесь на теге ввода. Кроме того, нижний колонтитул скрывается только тогда, когда ширина экрана меньше 800 пикселей (вы должны настроить, но это должно охватывать мобильные устройства).
Вы не можете это исправить, потому что все в порядке, ваш нижний колонтитул выполняет именно то, что вы ему сказали.
Ваше правило CSS для нижнего колонтитула говорит ему всегда «прикрепляться» к нижней части окна, даже когда клавиатура на мобильном устройстве видна, верхняя часть клавиатуры теперь является нижней частью окна.
При желании вы можете либо удалить значение position:absolute, либо просто изменить его на position:fixed
В такой ситуации, к сожалению, у CSS нет исправления. Таким образом, вы должны использовать javascript, чтобы сначала вычислить высоту окна в пикселях, а затем установить свойство css. Вы можете сделать это одной строкой! Но я сделал это пополам:
// PUSH FOOTER TO BOTTOM
var innerScreenHeight = window.innerHeight;
document.querySelector("#footer").style.top = innerScreenHeight + "px";
Вы можете скрыть нижний колонтитул, когда сосредоточитесь на поле ввода, и снова отобразить нижний колонтитул в фокусе вне поля ввода с помощью jquery.
$( "#inputID" ).focus(function() {
$("#footer").hide();
});
$( "#inputID" ).focusOut(function() {
$("#footer").show();
});