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

Question

假设我有一个水平webiste ( 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 example屏幕：

在这里你可以看到有足够的空间，准确地说是235px。

虽然窗口的宽度大于所有div宽度的总和，但仍然有剩余的空间。

此时窗口和文档都显示相同的宽度，因此都是有效的。

​

在这里，没有剩余的空间。

在您的例子中，这将成为530 -(200 + 200 + 200) = -70)的空白空间。

看看发生了什么

窗口宽度实际上小于文档宽度。为什么？

嗯，因为我把窗口调整到这么小，这就是为什么。

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

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

因此，结论是:改用这个$(document).width()应该可以解决这个问题。

解决方案

Here is the example介绍了它的工作原理。

这是我的解决方案。

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()函数之前，您应该查看documentation has to say的

此方法不适用于窗口和文档对象；对于这些对象，请改用.width()。

IE8返回一个不同于其他浏览器的值的原因是IE太烂了。:)

不，但说真的，IE8可能有一个不同的框大小调整属性，并因此给出不同的结果，而您使用的是outerWidth()；如前所述，它不是该函数的正确应用程序。

查看this answer。