在webkit浏览器中，分别从正文宽度和高度中减去y滚动条宽度和x滚动条高度。

Question

我的网页有居中的页眉、内容和页脚div，每个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解决方案来计算和减去y滚动条宽度和x滚动条高度分别从CSS主体宽度和高度在webkit浏览器中，以说明webkit浏览器如何在页面的宽度和高度包括滚动条，以便我的CSS媒体查询，以重新缩放页面的主体，以适应查看区域在所有浏览器上工作相同。

我对其他解决方案不感兴趣，比如让滚动条始终存在，以使缩小比例始终在webkit浏览器中工作。

Answer 1

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

我相信滚动条的宽度大约是15px，但这应该很容易找到。

// 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>');

而不是设置和取消设置主体上的填充。