0

我有一个 jquery 移动页面。即使我在 html 和 body 上设置了 100%，html 和 body 的高度仍然与其内容容器（landing-container）不同。对于这个 jsfiddle 示例，它的主体高度约为 300 像素，但着陆容器的高度约为 1600 像素。我正在使用 Chrome。为什么会发生这种情况，是否有任何解决方法？

html, body {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}

<html>
<body>
<div id="holder" data-role="page" data-theme="none" data-ajax="false">
    <div class="header">
    </div>
    <div class="landing-container">
    </div>
</div>
</body>
</html>

你可以在这里查看。 http://jsfiddle.net/angelohuang/brbqh/4/

4

1 回答 1

1

可能是因为你有position: absolute一些东西？

绝对定位使元素脱离了正常的布局流程，因此它不会影响其父元素的高度。

看起来 jQuery mobile 正在添加许多这些样式作为这些data-role东西的结果。我个人对 jQuery mobile 并不熟悉，但也许您以非标准方式使用它？

编辑

哦，哈哈哈。这也可以：

.ui-mobile, .ui-mobile body {
  height: 99.9%;
}

这样它永远不会超过窗口高度，除非我很困惑。

于 2013-04-09T22:51:53.467 回答