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％

回答

相關問題