（交叉浏览）检索可用的水平宽度并将其应用于 div

Question

可以说我有一个水平网站（ http://toniweb.us/gm2/ ）并且在某个我想知道有多少水平宽度可用，

我制作了这张图片，以便更容易理解

所以我需要获得额外空间的宽度

，我正在尝试这样：

$(window).outerWidth(true)-($('header').outerWidth(true)+$('#nvl1').outerWidth(true)+$('#nvl2').outerWidth(true))

也尝试过

$(window).width()-($('header').outerWidth(true)+$('#nvl1').outerWidth(true)+$('#nvl2').outerWidth(true))

，但在 IE8 中它没有返回相同的值...

然后我需要将它应用到 div，我做了这个函数

function rellenarEspacio(){
    if(lte8){
        var w = $(window).width()-($('header').outerWidth(true)+$('#nvl1').outerWidth(true)+$('#nvl2').outerWidth(true))+$('#nvl2').outerWidth(true);
    }else{
        var w = $(window).width()-($('header').outerWidth(true)+$('#nvl1').outerWidth(true)+$('#nvl2').outerWidth(true));
    }

    //alert(w);
    $('.extra').css({'display':'block'});
    $('.extra').css({'width':w});
    return false
}

但没有使用整个空间

知道我错过了什么吗？

Answer 1

解释

你得到一个负值，因为……嗯，因为这是正确的。

如果您有 3 个 div 始终占用 X 空间，而您的视口小于所有 div 宽度的总和，则没有剩余空间。
为了最好地描述它，我打印了我的 JSFiddle 示例：

在这里你可以看到有足够的空间，准确地说是 235px。
虽然窗口的宽度大于所有 div 宽度的总和，但仍然有剩余空间。
此时窗口和文档都显示相同的宽度，因此两者都是有效的。

---

这里已经没有空间了。
在您的情况下，这将变成 530 -(200 + 200 + 200) = -70) 空白区域。

看看会发生什么：
窗口宽度实际上小于文档宽度。为什么？
嗯，因为我将窗口大小调整得那么小，这就是原因。

另一方面，文档宽度仍然是所有这些 div 宽度的总和。

这样做的原因是因为您拥有视口的大小，即窗口的大小，而不是包含所有元素的文档的大小。

因此，总而言之：使用 $(document).width() 代替，应该可以解决问题。

---

解决方案

这里是有关其工作原理的示例。
这是我的解决方案。

function adjustSpace(){
    var iHeaderW = $('header').outerWidth(),
        iNvl1W = $('#nvl1').outerWidth(),
        iNvl2W = $('#nvl2').outerWidth()
        iDocW = $(document).width();
    var iEmptyWidth = iDocW - (iHeaderW + iNvl1W + iNvl2W);

    console.log("Empty space: "+iEmptyWidth);        

    if(iEmptyWidth <= 0){
        $('.extra').width(0).hide();
        return false;
    }

    $('.extra').width(iEmptyWidth).show();
    return true
}

其他信息

在使用 outerWidth() 函数之前，您应该查看文档不得不说：

该方法不适用于窗口和文档对象；对于这些，请使用 .width() 代替。

IE8 之所以返回与其他浏览器不同的值，是因为 IE 很糟糕。 :)
不，但说真的，IE8 可能具有不同的框大小属性，并因此给您带来不同的结果，并且您正在使用 outerWidth()；如前所述，这不是该功能的正确应用程序。

查看此答案。