2011-04-11 64 views
2

我已經構建了一個主題,使其使用100%的頁面高度。觸摸屏設備,無溢出滾動可能:自動和固定高度

佈局的基本內容如下:div#容器包含3個div,頁眉,頁腳,內容。所有定位絕對#容器,14%高度標題,6%高度頁腳,其餘的是內容。除內容外的所有div均已溢出:隱藏,內容溢出:自動。

它適用於大多數桌面瀏覽器(FF3.6 +,IE 8+,Opera 10.5+,Chrome實際)。在觸摸屏設備上,它顯示出一切都很好,但我沒有滾動條,也沒有滾動#content的可能性。

測試頁:http://pearlofdanube.hu

與Android 2.2測試內置的瀏覽器和Opera移動,一些報道它與iPhone相同。

有沒有人有任何正確的解決方法的想法,沒有佈局的基本變化?客戶真的想要有相同的佈局任何類型的設備。

+0

我知道這是一個古老的職位,但你有沒有搞清楚這一個CSS/HTML解決方案演示?我目前有完全相同的問題... – Rebecca 2016-02-24 05:59:46

回答

0

iSCroll可能對您有所幫助。您應該將所有內容的包裝設置爲您希望滾動條所需的大小。然後:

function loaded() { 
    document.addEventListener('touchmove', function(e){ e.preventDefault(); }); 
    myScroll = new iScroll('scroller'); 
} 
document.addEventListener('DOMContentLoaded', loaded); 

「滾動條」是將被更改爲您要滾動的元素的ID的強制ID。希望這可以幫助。

這裏是你可能想看看http://cubiq.org/dropbox/iscroll4/examples/simple/