Html和身高不是100％

我有一个jQuery的移动页面。即使我在html和body上设置了100％，html和body的高度仍然与其内容容器（landing-container）不同。对于这个jsfiddle示例，它的身体高度大约为300px，但着陆容器的高度大约为1600px。我正在使用Chrome。为什么会发生，有没有解决方法？Html和身高不是100％

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/

来源

2013-04-09 angelokh

您是否在谈论内容高度，因为HTML和身高不计算在jQuery Mobile中？ – Gajotres 2013-04-09 18:52:15

如果您查看ui页面元素＃持有者的高度，它是100％。然而，body和html不会覆盖它100％，但只有顶部。我假设父母应该具有与孩子内容高度相同的高度。 – angelokh 2013-04-09 18:56:21

问题是，在你的例子中很难看到你想要什么。你可以创建一个简单的jsFiddle例子，或者至少清理一些HTML。 – Gajotres 2013-04-09 19:04:42

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

绝对定位将元素排除在正常布局流程之外，因此不会影响其父母的身高。

看起来像jQuery移动添加很多这些样式作为data-role东西的结果。我个人对jQuery手机并不熟悉，但也许你以非标准方式使用它？

编辑

哦，HAHAH。这也会这样做：

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

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

来源

2013-04-09 22:51:53

你说得对。如果我从landing-container css属性中注释出绝对位置：其父（.holder）现在包含所有儿童的高度。但是，body和html仍然较短。我不认为它是99.9％，因为差异超过1000像素。 – angelokh 2013-04-10 00:19:47

如果将其更改为'height：auto;'，会发生什么情况？我不是在暗示它的'0.1％'差距，但是百分比是相对于窗口高度（在屏幕上可见）而不是它的内容。 – 2013-04-10 15:22:38

Html和身高不是100％

回答

相关问题