키보드가 열려있을 때 바닥 글이 위로 밀려 나옵니다. HTML/CSS?

Question

내가 여기에서하려고하는 모든 것은 데스크톱에서 열 때 완벽하게 작동하는 내 사이트에 간단한 바닥 글을 추가하는 것입니다. 그러나 태블릿이나 모바일에서 키보드를 사용할 때마다 로그인 할 때마다 바닥 글이 페이지 바로 위에서 움직입니다 키보드. 이 아이디어를 고치는 방법이 있습니까?

아무 문제가 없기 때문에 당신은 그것을 고칠 수

#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

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>&copy; 2018 SulmaxCP. All Rights Reserved.</p> 
 
</div> 
 
</div>

것은

는 body 태그에서 자신의 위치를 ​​관련이 바닥 글과 키보드 본체의 높이 변경 및 바닥 글을 표시 할 때 키보드를 얻는다.

Answer 2

이, 바닥 글은 당신이했습니다 정확히 무엇을하고있는 CSS 그것을하도록 말했다.

바닥 글에 대한 CSS 규칙은 휴대 기기의 키보드가 보이더라도 항상 키보드 하단이 창 하단에있는 경우에도 창의 하단에 항상 '첨부'하도록 말합니다. 당신이 원하는 경우

, 당신은 position:absolute 값을 제거 할 수 있습니다하거나 당신이 제출 한 입력에 초점을 보여줄 때 다시 바닥 글을 숨길 입력에서 초점 바닥 글 jQuery를 사용하여 제기 할 수 position:fixed

Answer 3

로 변경.

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

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

Answer 4

이 싼 해키 수정,하지만 :

CSS :

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

    .hide-footer { 
     display: none; 
    } 

} 

jQuery를이 즉시 포커스로 바닥 글 클래스 .hide-footer을 추가

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

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

입력 태그에. 또한 화면 너비가 800px 미만인 경우에만 바닥 글이 숨겨집니다 (맞춤 설정해야하지만 휴대 기기를 포함해야 함).