移動端頁面鍵盤彈出後導致body高度變低背景圖片被擠上去解決方法

阿新 • • 發佈：2019-02-16

本身在設定背景圖片的時候是將html,body的高度設為100%，然後

.main{
  height: 100%;
  background: url('../assets/images/[email protected]') no-repeat left top;
  background-size: 100% 100%;
}

但是這樣寫就會導致鍵盤彈出的時候html和body的高度從原來的100%變為（100%-鍵盤高度），這樣的話main的height:100%也會變成（100%-鍵盤高度），所以需要強行將main的高度設定為html原本的100%。

<div class="main" :style="{ height: bodyHeight + 'px' }">
</div>

mounted(){
 this.bodyHeight=document.documentElement.clientHeight
}

這樣的話即使鍵盤彈起也只會改變html和body的高度，main的高度還是之前的100%，背景圖片也就不會被擠上去了

移動端頁面鍵盤彈出後導致body高度變低背景圖片被擠上去解決方法

本身在設定背景圖片的時候是將html,body的高度設為100%，然後.main{ height: 100%; background: url('../assets/images/[email protected]') no-repeat left top;

關於html頁面移動端軟鍵盤彈出時影響頁面佈局的問題

html頁面在手機上寫了input框的時候，手機的軟鍵盤會彈出，會將頁面推上去，頁面佈局會改變，要在頁面寫如下程式碼： $(document).ready(function () { 　　$('body').height($('body')[0].clientHeight)

安卓移動端軟鍵盤彈出問題解決方案

log logs 情況 sel clas scrollto refs ext 題解移動端開發難免拿到輸入框居中或者位於底部的情況，ios 端，軟鍵盤能夠按正常預期向上滑動（這裏有個問題，當 input 聚焦時，彈出軟鍵盤，input 上滑，此時屏幕是具有滾動效果的，還沒找

Ionic3學習筆記（九）關於 Android 端軟鍵盤彈出後介面被壓縮的問題

本文為原創文章，轉載請標明出處今天做了一個如下圖所示的頁面。 iOS 端毫無 bug，Android 端卻出現了問題。當軟鍵盤彈出後，Android 端的 tabs 移到了軟鍵盤的上面，再仔細一看，整個介面都被壓扁了，輸入框也不知道去哪兒了。於是去

解決移動端文字框被原生鍵盤彈出後擋住文字框

記一次，解決移動端文字框彈出鍵盤遮擋輸入框的方法: document.activeElement.scrollIntoViewIfNeeded(); 方法用來將不在瀏覽器視窗的可見區域內的元素滾動到

vue-cli 單頁面手機應用input點選手機端虛擬鍵盤彈出蓋住input

在用vue-cli腳手架搭建手機H5頁面應用的時候，其中一頁中部有input，底部有position：absolute；bottom：0的元素，當點選input框時在安卓手機上出現了： 1 虛擬鍵盤彈出蓋住input 2 底部定位的元素被擠上來網路上很多關

h5頁面在安卓手機端軟鍵盤彈出頂起頁面佈局的解決辦法

var oHeight = $(document).height(); $(window).resize(function(){ //ios軟鍵盤彈出不會觸發resize事件 if($(document).height() < oHeight){ $("#

KeyboardUtil【軟鍵盤彈出後輸入框上移一定的高度】

周記3——解決fixed屬性在ios軟鍵盤彈出後失效的bug

images fff 發現 apple load http none orien 兩種方法　　這周在做空間（“類似”qq空間）項目。首頁是好友發表的說說，可以針對每條說說進行評論，評論框吸附固定在屏幕底部。此時，Bug來了...在ios上，軟鍵盤彈出後fixed屬性失效了

關於ListView中EditText在軟鍵盤彈出後的焦點問題

在ListView中，每次彈出軟鍵盤後就會重新呼叫getView（）方法，導致EditText失去焦點。解決辦法：在getView()方法中新增監聽器： editText.setOnTouchListener(new OnTouchListener() { @Override

軟鍵盤彈出後，Activity變形，popupWindow遮蓋住。

"adjustUnspecified" It is unspecified whether the activity's main window resizes to make room for the soft keyboard, or whether the c

[iOS崩潰]App鍵盤彈出後進入後臺crash

問題全域性替換NSArray,NSMutableArray,NSDictionary,NSMutableDictionary等集合的方法（比如objectAtIndex:,addObject:,setObject:forKey:等等）去去獲取一些安全性時（避

軟鍵盤彈出後，Activity變形，popupWindow遮蓋住

"adjustUnspecified" It is unspecified whether the activity's main window resizes to make room for the soft keyboard, or whether the con

鍵盤彈出後又消失的問題

問題：三星手機，帶有底部選單欄自動隱藏的功能，當開啟此項功能時，在Activity中點選開啟鍵盤時，會導致鍵盤彈出後，馬上消失掉；解決：方法一：設定手機總是顯示底部選單欄，問題解決；方法二：當進入該Activity時，手動隱藏底部選單欄：在Activity的o

PopupWindow彈出後螢幕其他部分變暗

iOS鍵盤彈出的時候會擋住底部的控制元件，可以通過以下方法將整個UIView上移。

//通知中心addObserver [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(transformView:) name:UIKeyboardWillChangeFr

QTP錄製後彈出框一個或多個ActiveX控制元件無法顯示的解決方法

錄製一段指令碼程式碼，在專家檢視視窗中編輯錄制的指令碼程式碼時，會碰到彈出一個對話視窗，提示為“當前安全設定禁止執行該頁中的ActiveX 控制元件，因此，該頁可能無法正常顯示”類似的東西，而在人工操作時卻沒有這樣的現象。（如圖）問題主要出在於QTP設定本身，之所以在編輯錄制好的指

彈出對話方塊時,點選“取消”表單仍然提交的解決方法

大家在實際工作中用js的時候可能會遇到這種情況：confirm（）彈出的對話方塊，當用戶點選“取消”的時候，表單仍然提交的問題; 一般來說這種問題產生的原因有一下幾點：1：在判斷comfirm （）為“取消”的時候，我們沒有返回false;即：if（！comfirm（“確定要提交表單嗎？”））{ &

Android輸入法彈出時把佈局頂上去和登入按鈕頂上去的解決方法

背景：在寫登入介面時，老闆就覺得在輸入密碼的時候談出來的輸入法軟鍵盤把登入按鈕遮擋住了（入下圖所示，不爽），連輸入框都被擋了一半，於是不滿意了，要叫我改，於是我看QQ的登入效果，我就去研究了一下，彈出輸入法整個佈局上來了，終於讓老闆滿意了。（如上圖這樣，老闆不滿意的，

啟動 Eclipse 彈出“Failed to load the JNI shared library jvm.dll”錯誤的解決方法！

原因1：給定目錄下jvm.dll不存在。對策：（1）重新安裝jre或者jdk並配置好環境變數。（2）copy一個jvm.dll放在該目錄下。原因2：eclipse的版本與jre或者jdk版本不一致

移動端頁面鍵盤彈出後導致body高度變低背景圖片被擠上去解決方法

相關推薦