（跨瀏覽）檢索avaliable水平寬度，並將其應用到一個div

Question

可以說，我有一個水平網站（http://toniweb.us/gm2/），並在某一點我想知道多少水平寬度是怎麼avaliable，

我做了這個畫面，以便更容易理解

所以我需要得到額外的空間的寬度

，我想是這樣的：

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