如何使用百分比设置宽度并使用或不使用垂直滚动条获得相同的宽度?

时间:2011-12-08 01:56:48

标签: css positioning browser-scrollbars

我有一个我想拥有的元素width: 50%。但是当右侧滚动条出现时,50%看起来与以前不同,并且由于某些元素出现并消失(通过动画),滚动条也会出现并消失,从而动态地改变元素的宽度。

请参阅Live Demo

有什么方法可以用百分比设置元素的宽度而不受垂直滚动条的存在与否的影响?

2 个答案:

答案 0 :(得分:3)

你可以进行宽度调整以适应点击上的滚动条,但是如果你要进行很多可能会导致这种情况发生,那么最好放一下......

body {overflow-y: scroll;}

...并且始终存在垂直滚动条。见http://jsfiddle.net/htWrC/1/

答案 1 :(得分:0)

你可以做这样的事情

检查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/