我的网页具有居中的页眉,内容和页脚div,每个宽度为900px。

(我只能提供有关页眉,内容和页脚的其他可能相关信息,即页眉具有固定的位置,内容是相对定位的,并且页脚是绝对定位的。但是,我不确定此信息是否与解决方案。)

我正在使用以下CSS媒体查询:

/* If screen width is less than or equal to 900px (e.g.: tablet, mobile) ... */
@media only screen and (max-width: 900px) {
    /* Scale header, content and footer width */
    #header, #content, #footer { width: 100%; }
}


当页面宽度变得小于其默认宽度时,开始随页面按比例缩小这些div。我希望缩小比例在所有浏览器中都是无缝的,但是,我遇到了一个问题,因为Webkit浏览器会在页面宽度中计算y和x滚动条的宽度。这使滚动条以特定的宽度覆盖div,并使缩小发生的较晚。

我想使用一种JQuery解决方案,分别在webkit浏览器中分别从CSS主体宽度和高度中减去y-scrollbar宽度和x-scrollbar高度,以说明webkit浏览器如何在页面的宽度和高度中包括滚动条,因此,我的CSS媒体查询以重新缩放页面的主体以适合查看区域,在所有浏览器中的工作原理都是相同的。

我对替代解决方案不感兴趣,例如使滚动条始终存在以使按比例缩小在Webkit浏览器中始终相同。

最佳答案

我建议使用JavaScript来检测HTML主体在水平和垂直方向上是否都大于窗口。如果它们超出了窗口,则会有一个滚动条。然后,您可以在主体上添加填充以适应此情况。

我相信滚动条的宽度约为15像素,但这应该很容易找到。

// Check if body height is higher than window height :)
if ($("body").height() > $(window).height()) {
    alert("Vertical Scrollbar! D:");
}

// Check if body width is higher than window width :)
if ($("body").width() > $(window).width()) {
    alert("Horizontal Scrollbar! D:<");
}


您可以使用上述代码来检测这两个值。将它们放在用于调整窗口大小的侦听器中将确保在需要时重新评估所有参数。

更新:

$(window).resize(function(){
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        $('body').css('padding-bottom', '15px');
    } else {
        $('body').css('padding-bottom', '0');
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        $('body').css('padding-right', '15px');
    } else {
        $('body').css('padding-right', '0');
    }
}


希望这可以帮助 :)

额外:

如果每个浏览器的滚动条尺寸都不同,则可以简单地使CSS类具有合适的浏览器尺寸,并通过调用以下方法来应用它:

$('body').addClass('<CLASSNAME>');




$('body').removeClass('<CLASSNAME>');


而不是设置和取消对身体的填充。

10-05 21:04
查看更多