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

Question

假设我有一个横向网站(http://toniweb.us/gm2/),在某一点上我想知道有多少水平宽度可用,

我制作了这张照片,因此更容易理解

所以我需要获得EXTRA SPACE的宽度

而我正在尝试这样:

$(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

说明

你得到一个负值,因为......好吧因为这是正确的.

如果你的视口小于所有div宽度组合,你有3个div总是占用X空间,那么就没有空间了.为了更好地描述它,我打印了我的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(); 如前所述,这不是该功能的正确应用.

看看这个答案.