(перекрестный просмотр) Получение доступной горизонтальной ширины и применение ее к делению

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 места, в то время как область просмотра меньше, чем все ширины блока вместе взятые, места не осталось.Чтобы лучше описать это, я напечатал на экране мой пример JSFiddle :
Здесь вы можете видеть, что есть много места, 235 пикселей, если быть точным.
Хотя ширина окна большечем сумма всех значений ширины div, остается еще место.
И окно, и документ показывают одинаковую ширину в этой точке, поэтому оба значения действительны.

---

Здесь не осталось места.
В вашем случае это станет 530 -(200 + 200 + 200) = -70) пустым пространством.

Посмотрите, что происходит :
Ширина окна на самом деле меньше, чемширина документа.Почему?
Ну, потому что я изменил размер окна, чтобы оно стало таким маленьким, вот почему.

С другой стороны, ширина документа по-прежнему является суммой всех этих значений ширины div.

причина этого в том, что у вас есть размер области просмотра, то есть размер вашего окна, а не размер документа, который содержит все ваши элементы.

Итак, в заключение: использование этого $(document).width() должно решить проблему.

---

Решение

Вот пример onкак это работает.
И вот мое решение.

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();что, как упоминалось ранее, не является правильным применением для этой функции.

Зацените этот ответ .