Как установить ширину в процентах и ​​получить одинаковую ширину с вертикальной полосой прокрутки или без нее?

Question

У меня есть элемент, который я хочу иметь width: 50%. Но когда есть правая полоса прокрутки, эти 50% выглядят иначе, чем раньше, и поскольку некоторые элементы появляются и исчезают (посредством анимации), полоса прокрутки также появляется и исчезает, динамически изменяя ширину моего элемента.

См. Live Demo

Можно ли как-нибудь установить ширину элемента в процентах и ​​не повлиять на наличие или отсутствие вертикальной полосы прокрутки?

Answer 1

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

body {overflow-y: scroll;}

... и всегда иметь вертикальную полосу прокрутки. Смотри http://jsfiddle.net/htWrC/1/

Answer 2

Вы могли бы сделать что-то вроде этого

Проверьте, не выше ли высота div, чем высота window.

Если это так, есть свиток. Установите width немного шире для учета полосы прокрутки.

Код

$('button').click(function(){
    $('p').toggle();

    var a = $('#box');

    if(a.height() > window.innerHeight){
        $('#box').css('width', '51.7%');
    }

    else{
        $('#box').css('width','50%');    
    }              

});

Пример: http://jsfiddle.net/htWrC/2/