【问题标题】：JQuery Mobile: Extra space, black line appearing under data-role="content"?JQuery Mobile：额外空间，data-role =“content”下出现黑线？
【发布时间】：2013-06-07 00:17:47
【问题描述】：

我有一个页面，上面有两个列表。当我在我的 iPhone 5 上进行测试时，列表下方有大量额外的空白区域和一个随机的空白行。（见下图）

我没有使用页脚data-role="footer"。只需data-role="content" 和data-role="page"。我尝试过使用页脚，但没有任何区别。

当我在网络浏览器上测试时一切正常，所以我无法使用元素检查器找出问题所在。

有人知道如何摆脱这个吗？（如果重要的话，我会在 Cordova 上运行它）

我的 HTML 是：

   <div data-role="page" data-title="Conversation">

              <div data-role="header">
                  <a href="index.html" data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l" data-iconpos="left">Back</a>
                  <h1>Conversation</h1>
              </div><!--HEADER-->

              <div data-role="content">
                  <ul data-role="listview">
                      <li><a id="facebook" href="#"><img class="ui-li-icon" src="img/facebook.png"/>Facebook</a></li>
                      <li><a id="twitter" href="#"><img class="ui-li-icon" src="img/twitter.png"/>Twitter</a></li>
                      <li><a id="youtube" href="#"><img class="ui-li-icon" src="img/youtube.png"/>YouTube</a></li>
                      <li><a id="instagram" href="#"><img class="ui-li-icon" src="img/instagram.png"/>Instagram</a></li>
                      </ul>
                      <div class="yeldivider"></div>
                  <ul data-role="listview">
                      <li><a id="tickets" href="#"><img class="ui-li-icon" src="img/ticketsicon.png"/>Tickets</a></li>
                  </ul>

               </div><!--CONTENT-->

      </div><!--PAGE-->

除了出现在两个列表之间的 .yeldivider 之外，没有自定义 CSS。

.yeldivider {
    background-color:#ffeb00;
    height: 40px;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    margin-left: -40px;
}

【问题讨论】：

标签： ios css jquery-mobile cordova

【解决方案1】：

这是一个疯狂的猜测，但有时内容 DIV 存在垂直拉伸问题。

最坏的情况，给它一些 id 或 class，像这样：

<div data-role="content" class="cover-screen">
    //Content goes here
</div>

如果您没有页脚，请使用此 CSS：

.cover-screen {
    position: absolute;
    top: 43px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

或者这个 CSS 如果你有页脚：

.cover-screen {
    position: absolute;
    top: 43px !important;
    bottom: 43px !important;
    left: 0 !important;
    right: 0 !important;
}

就像我告诉过你的，这只是一个疯狂的猜测。

【讨论】：

感谢您的建议，但恐怕没有运气 :(
告诉我你还有同样的问题吗？它只发生在 iOS 5 上吗？
是的，我仍然有同样的问题 - 不幸的是我只有 iPhone 5 可以测试。但是在 3.5" 模拟器中看起来还不错

【解决方案2】：

在这里 DEMO http://jsfiddle.net/yeyene/SjbMd/ 工作正常，并且已经在 iPhone 上进行了测试。

我用这些...

jquery.mobile-1.3.1.min.css

jquery-1.9.1.min.js 移除

jquery.mobile-1.3.1.min.js

你的呢？

CSS

.yeldivider {
    background-color:#ffeb00;
    height: 40px;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    margin-left: -40px;
}

【讨论】：