gpt4 book ai didi

javascript - 在 HTML5 上取消滚动

转载 作者:行者123 更新时间:2023-11-30 18:13:20 24 4
gpt4 key购买 nike

我有一个 HTML5 页面

页面定义为100% 高度,并且仍然有一个滚动条。

一开始我以为是因为我的页面中有Google Map,然后我用另一个浏览器打开页面,滚动条比第一个浏览器小,

然后我想到这是因为不同的工具栏

真的是工具栏的问题还是 map 的问题,如何解决?

谢谢...

我的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>

最佳答案

如果这对您来说不是问题,请查看我的 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。如果您只有 map ,则无。

对于此公式,您需要一个视点元标记集,因为您会得到错误的屏幕尺寸。

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

这是一个 jsFiddle 示例:http://jsfiddle.net/Gajotres/HKjEF/

在 Win Firefox、iPad Safari、Android 4.1 Chrome 环境中测试。

关于javascript - 在 HTML5 上取消滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14020751/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com