0
アプリがモバイルのすべてのディスプレイをカバーしているわけではありません。底に細い黒いバーがあります。アプリケーションがモバイル（jqueryMobile）上のすべてのディスプレイスペースを使用するようにするには？
<body>
<div data-role="page" id="main" data-theme="b" data-fullscreen="true">
<div data-role="header" data-fullscreen="true">
<h1>Scheduler</h1>
<a href="#adding" data-icon="plus" data-iconpos="notext" class="ui-btn-right" data-rel="dialog" data-role="button">Dodaj</a>
</div>
<div data-role="main" class="ui-content" id="list">
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li><a href="#settings" data-transition="flip" data-role="button" data-icon="gear" data-rel="dialog">Settings</a></li>
<li><a href="#info" data-transition="flip" data-role="button" data-icon="info" data-rel="dialog">Info</a></li>
</ul>
</div>
</div>
</div>
<!--Adding goals-->
<div data-role="page" id="adding">
<div data-role="header">
<h1>Adding new goal</h1>
</div>
<div data-role="main" class="ui-content">
<form data-theme="e">
<form onsubmit="return false;">
<label>
NEW GOAL:<input type="text" id="goal" />
</label>
<input type="button" value="ADD" id="addBtn"/>
</form>
</form>
</div>
</div>
<!--Settings-->
<div data-role="page" id="settings">
<div data-role="header">
<h1>Settings</h1>
</div>
<div data-role="main" class="ui-content">
<form data-theme="e">
<input type="button" value="Clear all elements" id="delBtn"/>
</form>
</div>
</div>
<!-- Info -->
<div data-role="page" id="info">
<div data-role="header">
<h1>Info</h1>
</div>
<div data-role="main" class="ui-content">
Here help will be. ~~Yoda
</div>
</div>
CSSコードは、このようなものです：私は、そのコードが十分になることを願っ
var db = new PouchDB('goals');
var remoteCouch = 'goals_remote';
db.changes({
since: 'now',
live: true
}).on('change', createList);
createList();
//creating goals
document.getElementById('addBtn').addEventListener('click', function(){
var txt = document.getElementById('goal').value;
var goal = {
_id: new Date().toISOString(),
text: txt,
completed: false
}
db.put(goal, function callback(err, result){
if(!err){
console.log('success');
refresh();
}
});
}, false);
//deleting elements
document.getElementById('delBtn').addEventListener('click', function(){
db.destroy().then(function() {
refresh();
});
}, false);
function refresh(){
location.reload(true);
}
//pressing goal
function pressGoal(goal){
if(goal.completed){
goal.completed = false;
} else {
goal.completed = true;
}
db.put(goal);
createList();
}
function createList() {
var completedTasks = [];
var notCompletedTasks = [];
db.allDocs({
include_docs: true,
descending: true
}).then(function(result) {
for(var k = 0; k < result.rows.length; k++){
if(result.rows[k].doc.completed){
completedTasks.splice(completedTasks.length, 0, result.rows[k].doc);
} else {
notCompletedTasks.splice(notCompletedTasks.length, 0, result.rows[k].doc);
}
renderList(completedTasks, notCompletedTasks);
}
}).catch(function(err) {
console.log(err);
});
}
function renderList(completedTasks, notCompletedTasks){
var code = '';
var notCode = '';
var elementsArr = [];
//creating lists
for(var i = 0; i < notCompletedTasks.length; i++){
code += '<div class="ui-checkbox" id="'+notCompletedTasks[i]._id+'"><label class="ui- checkbox-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-b" data-corners="true" data-shadow="false" data-iconshadow="true" data- wrapperels="span" data-icon="checkbox-off" data-theme="b" data-mini="false"> <span class="ui-btn-inner"><span class="ui-btn-text">'+notCompletedTasks[i].text+'</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"> </span></span></label><input type="checkbox"></div>';
}
for(var j = 0; j < completedTasks.length; j++){
notCode += '<div class="checked" id="'+completedTasks[j]._id+'">'+'<div class="ui-icon ui-icon-check">'+'</div>'+'<span class="field">'+completedTasks[j].text+'</span>'+'</div>';
}
//build
document.getElementById('list').innerHTML = code + notCode;
for(var k = 0; k < notCompletedTasks.length; k++){
(function(){
var arg = notCompletedTasks[k];
document.getElementById(arg._id).addEventListener('click', function(){
pressGoal(arg);
}, false);
})();
}
for(var k = 0; k < completedTasks.length; k++){
(function(){
var arg = completedTasks[k];
document.getElementById(arg._id).addEventListener('click', function(){
pressGoal(arg);
}, false);
})();
}
}
：javascriptのコード
#main{height:100% !important;}
html,body{
margin:0;
padding:0;
border:none;
}
。 CSSコードがなぜうまくいかないのか分かりません。
これを行う方法はありますか？私はこの質問に対する答えを見つけることができませんでした。
編集：javascriptコードを追加しました。残念ながら私は何がその問題を作り出したか分からないので、コードはちょっと巨大です。そのために残念。 私は、ユーザーデータを格納するためにpouchDBを使用し、モバイル用にcocoon.ioでコンパイルしました。
JavaScriptとjquery-mobileタグはなぜですか？ –
あなたが使用している 'javascript'コードのいくつかを提供していますので、よろしくお願いします。ここで答えを試してみてくださいhttp://stackoverflow.com/a/37026141/1020127 – melanholly
@melanhollyありがとう、私はちょうどその問題を解決しました - html {height：100％;}を追加する必要がありました。 – daniel1234567