在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滚动条宽度。这使得滚动条在某些宽度上覆盖了divs，并且使缩放比较晚。

我想要一个JQuery解决方案来分别计算和减去webkit浏览器中CSS主体宽度和高度的y滚动条宽度和x滚动条高度，以说明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:<"); 
} 

您可以使用上面的代码来检测这两个值。将这些放置在窗口大小的侦听器中将确保每当必要时重新评估所有参数。

UPDATE：

$(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'); 
    } 
} 

希望这有助于:)

EXTRA：

如果滚动条的尺寸是每个浏览器的不同，你可以简单地做与浏览器尺寸正确的CSS类并通过以下方式应用：

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

和

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

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