Question

快速介绍是有序的。我是HTML，CSS和JavaScript的新手，目前正致力于使用HTML5和Jquery Mobile开发“混合”应用程序。到目前为止，我一直在很好地解决问题。

我遇到了一个问题，我的网页内容不够长，因此内容和固定页脚之间会出现空白区域。我已经尝试了多种解决方案，包括列出here的所有解决方案，但似乎都没有工作（授予，我可能一直在错误地实现它们）。

enter image description here

值得注意的是，这个问题似乎并不仅仅包含在index.html文件中，因为它在我导航页面时仍然存在，尽管额外的空格是不同的大小。同样值得注意的是，空白也位于页脚下方（因此，如果我点击页面使页脚暂时消失，则显示白色而不是背景颜色。）

这是index.html文件（出现问题并显示图像）。

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <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" />

        <!-- Stylesheets -->
        <link rel="stylesheet" href="css/The_Greens/The_Greens.css" />
        <link rel="stylesheet" href="css/The_Greens/jquery.mobile.icons.min.css" />

        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link href="jquerymobile/jquery.mobile.structure-1.4.2.min.css" rel="stylesheet" type="text/css" /> <!-- Add .structure after theme-->

        <!-- Jquery core -->
        <script src="js/jquery.js" type="text/javascript"></script>

        <!-- Jquery mobile library file -->
        <script src="jquerymobile/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>

        <!-- Scripts (pre-load)-->
        <script src="js/scripts.js" type="text/javascript"></script>

        <title>SYNCTFY</title>
    </head>
    <body>

<!-------------------------------------------------------PERSISTANT HEADER---------------------------------------------------------->
            <div data-role="header" data-position="fixed" style="height:40px" data-theme="e">
                <a href="#logout" data-icon="info">Log out</a>
                <h1 style="font-size: 20px" class="ui-title" role="heading">SYNCTFY</h1>
                <a href="#settings" data-icon="gear">Settings</a>
            </div>

<!--------------------------------------------------------Home Page----------------------------------------------------------------->

        <div data-role="page" id="home" data-title="Home" data-theme="e">
            <!--------------------------------------------Content------------------------------------------------------->

            <div data-role="content" data-theme="e">
                <a href="biblereadings.html" data-role="button">Bible Reading</a>
                <a href="biblestudy.html" data-role="button">Bible Study</a>
                <a href="prayerpaths.html" data-role="button" data-ajax="false">Prayer Paths</a>


            </div>

        </div>

<!-----------------------------------------------------PERSISTANT FOOTER------------------------------------------------------------>
        <div data-role="footer" data-position="fixed" data-theme="e">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html" data-icon="home" data-prefetch="true" data-transition="fade">Home</a></li>
                    <li><a href="events.html" data-icon="home" data-prefetch="true" data-transition="flip">Events</a></li>
                    <li><a href="news.html" data-icon="home" data-prefetch="true" data-transition="slide">News</a></li>
                </ul>
            </div>
        </div>


        <!-- Scripts (post-load)-->
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

我为再次提出如此受欢迎的问题而道歉，但我似乎找不到能够解决这个问题的解决方案。希望通过我提供的信息，我可以解决我的问题并帮助其他人寻找相同的解决方案。

其他信息： -css文件所有默认值，除了themeroller生成的css文件（尚未修改）。

我正在使用： Visual Studio 2013 Jquery Mobile 1.4.2 Phonegap 3.5.0

更新在firefox中打开我的index.html文件会使应用程序完美运行，但是如果我在Internet Explorer中打开它会显示空白区域。这是有道理的，因为我的应用程序的目标是使用IE作为浏览器的Windows手机。我在桌面上使用IE 11进行故障排除，因此它不是旧版本。有什么想法吗？

如何在JQuery Mobile混合应用程序中删除内容和页脚之间的空白区域？

0 个答案: