iPad上的100％高度分區

我正在使用骨架網格的響應式網站上工作，並具有100％瀏覽器窗口高度的左側浮動導航欄div。它適用於我測試過的所有瀏覽器，除了iPad上的移動Safari瀏覽器。在移動Safari瀏覽器中，導航div是視口的100％，但是當您向下滾動頁面時，div不會伸展到內容的底部。 [見下圖]。iPad上的100％高度分區

我該如何使div在iPad上的高度達到100％，而不僅僅是視口的100％？

開發網站：http://www.id8agency.com/jeremiah/jeremiah.png（因爲你可以看到左邊的白條一旦滾動不伸展到頁面底部）

：問題的 http://www.id8agency.com/jeremiah

截圖

它應該如何看： id8agency.com/jeremiah/jeremiah1.png （對不起，我沒有足夠的聲望發佈超過2個鏈接）

事情我已經嘗試：

設定的高度和最小高度，以110％（的作品，但在創建的桌面網站的滾動條）

集高度的內容高度（工作，但不是所有的頁面將是相同的長度，所以在創建一些網頁，其中的內容是短的滾動條）

設置位置：絕對和位置底部：0像素（不工作，位置DIV在t的底部他視口，而不是頁面的底部）

設置中繼檢視區標記身高=設備高度和高度= 1000（休息網站的響應功能）

感謝您的幫助，您可以提供！

來源

2013-05-01 bill

嘗試將.navigation元素設置爲position: fixed;，然後將內容置於其自己的包裝中（如.content-right）。

然後設置.content-right元素這些屬性包括媒體查詢「復位」時，一切都將一列（XXX是斷點）：

.content-right { 
    margin-left: 240px; 
} 

@media screen (max-width: XXX){ 
    .content-right { 
    margin-left: auto; 
    } 
}

來源

2013-05-01 21:50:14 jordanandree

這是一個很棒的簡單解決方案。謝謝！ – bill 2013-05-02 13:22:10

爲什麼不穿上外部div，並應用邊欄的背景（切片，以便它可以在y軸上重複）並重復y？它會擴展到內容結束，當您不再需要它時，您可以從媒體查詢中刪除背景。

來源

2013-05-01 21:27:37 drip

如果我理解你說的話，那就是我現在正在做什麼。目前有一個div以白色作爲重複1x1圖像的背景。但在iPad上，div不會滾動頁面內容的完整100％，它只會到視口的底部。如果我誤解了你的建議，請告訴我。 – bill 2013-05-01 21:37:55

不，我的意思是一個外部的div，左側和右側部分，重複背景只有機智repeat-y，不重複。 – drip 2013-05-02 04:38:42

的問題也出現，當我把我的桌面瀏覽器視口到一個小高度。我認爲問題在於，這裏的所有100％高度都與視口相關，我認爲您希望導航欄成爲內容的高度，而不是視口。

但可能的解決方案是在＃容器元素上設置一個虛擬列（請參見http://alistapart.com/article/fauxcolumns）。另一種可能性是使用jquery測量＃容器元素的高度並將其分配給導航欄。喜歡的東西：

var containerHeight = $('#container').height(); 
$('#navigation-container').css('height',containerHeight);

（如果它的作品我沒有檢查，但我認爲它應該。）

來源

2013-05-01 22:19:38 johnnydoe82

iPad上的100％高度分區

回答

相關問題