web-dev-qa-db-ja.com

モバイルキーボードがテキストフィールドの上にフッターが表示されないようにするにはどうすればよいですか？

フッターに問題があります。フッターを画面下部に残したいのですが、ちょっと問題があります。モバイルブラウザを使用している場合、キーボードを開いたときに一部のフィールドがフッターによってブロックされます。フッターがキーボードの上に表示され、入力しているフィールドがブロックされます。フッターを下部に保持して、キーボードの上に表示されないようにするにはどうすればよいですか？キーボードの下に隠しておきたい。

ブートストラップを使用していますが、自分のCSSに次のものを設定しています。

footer {
 width: 100%;
 position:absolute;
 left:0px;
 bottom:0px;
 height: 40px;
 margin: auto;
 overflow: hidden;
 background:#2E2E2E;
 text-align:center;
 line-height: 15px;
 color: #fff;

}

<html>
 <body>
  <div class="container">
  </div>
  <footer class="bs-footer" role="contentinfo">
 </body>
</html>

ご覧のとおり。 「Salasana」フィールドをアクティブにすると、フッターが上がり、テキストフィールドがブロックされます。

キーボードを開く前に：

before

キーボードを開いた後：

after

androidhtmlcsstwitter-bootstrapmobile-browser
15
Firze

Avinashのヘルプで問題を解決しました。私はCSSで以下を変更することになりました。コンテナーdiv内にすべてのコンテンツがあるので、コンテナーの高さを100％-フッターにしました。フッターからbottom：0pxも削除しました。

footer{
 position: relative;
}
html,body {
    height: 100%; /* Needed for container's min-height  */  
}

.container{
    min-height:100%;
    margin-bottom: -40px; /* Put negative height of the footer here */
    padding-bottom: 40px; /* Put height of the footer here. Needed for higher than screen height pages */
}
7
Firze

私は投稿された解決策を見つけました ここではStackOverflow はかなり役に立ちます。これには、問題を解決するJavaScriptスニペットが含まれており、以下に貼り付けています。

if(/Android [4-6]/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
      if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
         window.setTimeout(function() {
            document.activeElement.scrollIntoViewIfNeeded();
         },0);
      }
   })
}
3
Adam Davis

Position：relativeまたはfixedを使用してみてください

下にフッターが必要な場合は、ボディに最小の高さを追加する必要があります

2
user2381689

HTMLコードを変更したくない場合は、JSで修正してみてください。

上から現在の位置を取得し、上部のスタイル値を設定し、下部の値をリセットしています。

var fixed = document.querySelector(".fixed"),
    distanceFromTop = fixed.getBoundingClientRect().top;
fixed.style.top = distanceFromTop + 'px';
fixed.style.bottom = 'auto';
1
Sergei Panfilov