Question

我有一个jquery移动页面。即使我在html和body上设置了100％，html和body的高度仍然与其内容容器（登陆容器）不同。对于这个jsfiddle示例，它的主体高度约为300px，但着陆容器的高度约为1600px。我正在使用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/

Answer 1

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

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

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

修改

哦，哈哈。这样做也会这样做：

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

除非我感到困惑，否则它永远不会超过窗户高度。

Html和身高不是100％

1 个答案: