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

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

见

---

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

您可以在单击时调整宽度以适应滚动条，但是如果您有很多事情可能会导致这种情况发生，那么最好将

body {overflow-y: scroll;}

---

…并始终显示垂直滚动条。请参见

您可以调整宽度以适应单击时的滚动条，但是如果您有很多事情可能会导致这种情况发生，那么最好将

body {overflow-y: scroll;}

---

…并始终显示垂直滚动条。请参见

您可以这样做

检查

div

的高度是否高于

窗口的高度

如果是这样，就会有一个卷轴。将
宽度
设置得稍微宽一点，以适应滚动条

代码

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

    var a = $('#box');

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

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

});

示例：
您可以这样做

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

    var a = $('#box');

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

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

});

检查
div
的高度是否高于
窗口的高度

如果是这样，就会有一个卷轴。将
宽度
设置得稍微宽一点，以适应滚动条

代码

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

    var a = $('#box');

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

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

});

示例：
您确定这不是字体更改或边距填充更改吗？是否在包含元素上定义了宽度？发布HTML和相关CSS会有所帮助。当您使用jQuery设置元素动画时，请注意CSS样式的变化。将持续时间设为15秒，并在整个动画中观察css样式的变化，以便您可以看到可能导致问题的原因。如果不看到相关的HTML，我会情不自禁。我敢打赌这与css有关。确保没有层叠CSS影响你的liOh我明白了，额外的内容是让垂直滚动出现一个滚动条。由于my元素的宽度是一个百分比，因此它随页面宽度和滚动条的变化而变化。您确定这不是字体变化或边距填充变化吗？是否在包含元素上定义了宽度？发布HTML和相关CSS会有所帮助。当您使用jQuery设置元素动画时，请注意CSS样式的变化。将持续时间设为15秒，并在整个动画中观察css样式的变化，以便您可以看到可能导致问题的原因。如果不看到相关的HTML，我会情不自禁。我敢打赌这与css有关。确保没有层叠CSS影响你的liOh我明白了，额外的内容是让垂直滚动出现一个滚动条。由于my元素的宽度是一个百分比，它随页面宽度和滚动条的变化而变化。相同的想法，但这比我的解决方案更好/更简单。@Faust你的解决方案是什么？相同的想法，但这比我的解决方案更好/更简单。@Faust你的解决方案是什么？此解决方案不起作用，在JSFIDLE示例中，div的宽度仍然不同。此解决方案不起作用，在JSFIDLE示例中，div的宽度仍然不同。
$('button').click(function(){
    $('p').toggle();

    var a = $('#box');

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

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

});