Question

应用程序未覆盖移动设备上的所有显示屏 - 底部有一个细长的黑色条。

<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代码是这样的：

#main{height:100% !important;}
    html,body{
    margin:0;
    padding:0;
    border:none;
}

javascript代码：

        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">&nbsp;</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);
                })();
            }
        }

我希望代码足够了。我不知道为什么CSS代码不能正常工作。

有没有办法做到这一点？我找不到这个问题的答案。

编辑：我添加了javascript代码。不幸的是我不知道是什么造成了这个问题所以代码有点大。对不起。我使用pouchDB存储用户数据，并使用cocoon.io为手机编译。

Answer 1

您可以查看奥马尔的这篇文章：set content height 100% jquery mobile。它使用当前JQM 1.4.5版本的工作解决方案进行了更新，并且还涵盖了与html{ height: 100%; }相关的问题。

如何强制应用程序占用移动设备上的所有显示空间（jqueryMobile）？

1 个答案: