取消滾動的HTML5

頁面被定義爲100％的高度，而且還有滾動條。

起初我還以爲是因爲谷歌地圖，我有在頁，然後我在其他瀏覽器中打開該頁面，滾動條比第一瀏覽器更小，

後來我的想法，它是因爲工具條不同。

難道是因爲工具欄還是因爲地圖，以及如何解決？

謝謝...

我的CSS：

.ui-mobile 
{ 
    height: 99%; 
    width: 100%; 
} 

ui-mobile-viewport.ui-overlay-c 
{ 
    height: 99%; 

} 

#map_canvas 
{ 
    height: 99%; 
    width: 100%; 
    position: inherit; 
}

我的HTML：

所有的

<!DOCTYPE html> 
<html class="no-js"> 
<head> 
... 
    <title>Main Page</title> 
</head> 
<body> 
    <div id="MainPage" data-role="page"> 
     <script> 
      $("#MainPage").live("pageinit", function() { ... }); 
     </script> 
     <div id="map_canvas"> 
     </div> 

    </div> 
</body> 
</html>

來源

2012-12-24 Hodaya Shalom

如果你根本不需要滾動條，你可以設置'html {overflow-y：hidden; }'。否則，可能會有一個默認邊距，您可以通過'* {margin：0px; padding：0px; }' – 2012-12-24 11:36:45

我定義的元素必須在底部，然後如果沒有滾動，我不會看到它們 –

我希望頁面將忽略工具欄並開始計算下面的百分比。這可能嗎？ –

如果你看看我的jQuery的解決方案，這不是一個問題：

$(window).bind('resize', function() { 
    var screenHeight= 0; 
    screenHeight= $('[data-role="page"]').first().height() - $('[data-role="header"]').first().height()- $('[data-role="footer"]').first().height(); 
    $('#map_canvas').css('height',screenHeight - 4); 
}).trigger('resize');

頁的高度 - 頭部高度 - 英尺的高度 - 4 =內容高度

我使用 - 4來對抗邊界。如果只有頁腳或頁眉，請使用-2。沒有，如果你只有地圖。

對於此公式，您需要視點元標記集，因爲您將獲得錯誤的屏幕大小。

<meta name="viewport" content="width=device-width, initial-scale=1" />

這是一個的jsfiddle例如：http://jsfiddle.net/Gajotres/HKjEF/

在Win Firefox的測試，iPad的Safari瀏覽器，安卓4.1瀏覽器環境。

來源

2012-12-24 15:54:05 Gajotres

首先請分享HTML代碼。

對於你的問題：是的，這可能是因爲工具欄或其他一些默認的邊距，頁面中的填充。

您可以通過將高度設置爲98％或99％來刪除滾動條，它可爲您解決滾動問題。

來源

2012-12-24 11:32:37 Amber

取消滾動的HTML5

回答

相關問題