javascript - 为什么会出现这种计算差异？查询

Question

我有这个网站:

link

在document.ready计算或resize函数中调用函数是有区别的

页面加载时出现白边计算不正确...

$( document ).ready(function() {
    var windowsize = $(window).outerWidth();   
    var stanga= jQuery('#secondary').outerWidth();
    console.log('stanga:',stanga);
    var dreapta= jQuery('.right').outerWidth();
    console.log('dreapta:',dreapta);
    var contentwh=windowsize-stanga-dreapta;
    console.log('total:',contentwh);
    $('.navbar-fixed-top').css('width',contentwh);
    $('#main-content').css('width',contentwh);
    $('.continut').css('width',contentwh);

    $(window).on('resize',function(){
        var windowsize = $(window).outerWidth();   
        var stanga= jQuery('#secondary').outerWidth();
        console.log('stanga-resize:',stanga);
        var dreapta= jQuery('.right').outerWidth();
        console.log('dreapta-resize:',dreapta);
        var contentwh=windowsize-stanga-dreapta;
        console.log('total-resize:',contentwh);
        $('.navbar-fixed-top').css('width',contentwh);
        $('#main-content').css('width',contentwh);
        $('.continut').css('width',contentwh);
    }
});

基本上我使用了相同的代码和 document.ready，但也根据调整大小，不幸的是。

我在 1366 像素上进行了手动计算，应该得到 669 像素的宽度(良好的值(value))，而我是 657 像素的网站。

有谁知道为什么这个差异看起来是 12px？

提前致谢!

Answer 1

您一定是在使用 Windows 作为操作系统吧？

问题是在加载时，你有一个滚动条。所以当你进行计算时，一些元素的宽度较小。稍后，滚动条消失，出现白色间隙。

快速修复是在主体上添加 overflow:hidden 然后进行计算。之后，您可以删除隐藏的溢出。

请注意，当您将窗口调整到低于特定高度时也会出现此问题。