css - 如何使用百分比设置宽度并在有或没有垂直滚动条的情况下获得相同的宽度？

Question

我有一个我想要的元素width: 50%。但是当右滚动条出现时，这 50% 看起来与以前不同，并且由于某些元素出现和消失（通过动画），滚动条也会出现和消失，动态地改变我的元素的宽度。

观看现场演示

有什么方法可以用百分比设置元素的宽度，并且不受垂直滚动条的存在或不存在的影响？

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/