Phonegap Windows Phone差距空間底部

我用phonegap開發，我遇到了風格問題。Phonegap Windows Phone差距空間底部

我只想在底部放置頁腳。

這裏是我的index.html

<!DOCTYPE html>  
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
    <title>Hello World</title> 
    <script type="text/javascript" src="cordova-2.6.0.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
</head> 
<body id="page">   
    <div id="bottom"> 
     <p>Bonjour</p> 
    </div> 
</body> 
</html>

這是我的CSS

#bottom { 
position:fixed; 
width: 100%; 
bottom: 0px; 
background-color: #f00; 
} 
body { 
min-height: 533px; 
height : 100%; 
padding: 0; 
margin: 0; 
}

而且我有這個

Result on the phone

我怎樣才能解決這個問題，或者任何人遇到同樣的問題？

謝謝！

來源

2013-05-03 dpfauwadel

是它只在Windows手機上？也許它是一個窗口按鈕的特殊差距 – 2013-05-03 09:18:51

是的，它只在windows手機上。我們已經嘗試在iPhone和Android上，它工作正常。 – dpfauwadel 2013-05-03 09:50:45

@ChristopheSophy我希望我能夠upvote那個評論... – Dnaso 2013-05-03 13:21:34

首先，是將位置固定在IE上不起作用。

爲了解決這個問題，我想補充，包括對我的項目jQuery和改變位置以絕對

#bottom { 
position:absolute; 
width: 100%; 
bottom: 0px; 
background-color: #f00;   
margin: 0px; 
padding: 0px; 
left: 0px; 
}

和我的index.html

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 

    <link rel="stylesheet" type="text/css" href="css/index.css" /> 

    <title>Hello World</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css"> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script> 

    <script type="text/javascript" src="cordova-2.6.0.js"></script> 

    <script type="text/javascript" src="js/index.js"></script> 

</head> 
<body> 
    <div id="bottom"> 
     <p>Bonjour</p> 
    </div> 
</body> 
</html>

而現在它的工作

來源

2013-05-06 09:40:51 dpfauwadel

檢查樣式，確保沒有任何其他樣式被自動添加。有一點特別要檢查的是<p>的樣式嘗試將邊距和填充都設置爲0.

來源

2013-05-03 17:57:19 whodeee

Phonegap Windows Phone差距空間底部

回答

相關問題