CSS 100%宽度，但避免滚动条

这可能是已经解决了几十次的问题的变体，但是CSS真的让我觉得自己像个傻瓜

我正在尝试建立一个小部件，可以定位和大小的各种方式。这是一个非常简单的布局-固定高度的页眉、固定高度的页脚和占用剩余空间的正文。整体宽度和高度各不相同。正文的内容需要滚动。我有整个容器，页眉，页脚，和身体大小确定

但是我想要的是身体在需要时滚动，而不会在滚动条出现时向左收缩内容。也就是说，我希望主体尽可能宽，减去滚动条，如果它需要滚动，那么滚动条就在那里，这样当它确实需要滚动时，就不会收缩。实际上，我希望：

| - - - unknown width - - -|
+--------------------------+
| content                |*|
| might                  |*|
| scroll                 |*|
+--------------------------+

我希望可以滚动的内容尽可能宽，减去潜在的滚动条宽度（|*|区域）

我现在拥有的是这样的东西：

<div id="content" style="position: absolute; overflow-y: auto; width: 100%">
    <div id="scrollContent" style="???">
    </div>
</div>

.app {
  display: grid;
  grid-template-columns: 1fr 50vh 1fr;
}

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

---

我尝试过最里面的div的边距、填充、甚至宽度，以及所有“做移位”的东西。在FF3、IE7/8和（幻想？）IE6中，我也需要它。为什么不总是显示滚动条，即使不需要滚动

---

您可以通过设置

overflow:scroll到容器。
使用
overflow:scroll
而不是
overflow:auto
-这将强制始终显示滚动条。
在元素内部添加另一个具有overflow:auto样式的包装，并将其设置为约18px窄。滚动条应该出现在18px的间隙中。
问题是，一旦您将鼠标悬停在容器上，滚动条出现，内容宽度就会缩小。因此，即使使用宽度等于容器减去滚动条的嵌套容器，嵌套容器的宽度也会缩小

一种解决方案是通过悬停时滚动条的宽度增加内容的大小。这是一个不需要使用任何嵌套外部容器的解决方案（
categoryCont
是滚动容器，每个
menuBlock
都是要滚动的项目之一）：


A.
B
C
...
#类别控制：悬停{
溢出y：自动；
}
#categoryCont:悬停菜单块{
/*当滚动条出现时，增加菜单块的大小*/
宽度：218px；/*调整滚动条的宽度*/
}

上面提到的一个问题是，在不同的浏览器中，滚动条的宽度略有不同。以下其中一项应该有帮助：


通过使用px

将内容设置为绝对值，并将左缩进设置为绝对值

<div class="menuBlock" style="width:200px">
    a
</div>

<div class="menuBlock" style="width:200px">
    a
</div>


A.

更改为

<div class="menuBlock" style="width:200px">
    <span>a</span>
</div>

<style>
    .menuBlock span{        /* Good cross-browser solution but cannot use % */
        position:absolute;
        left:70px;
    }
</style>

<div class="menuBlock" style="width:200px">
    <span>a</span>
</div>

<style>
    .menuBlock span{        /* Good cross-browser solution but cannot use % */
        position:absolute;  /* This one does not use 'left' */
    }
</style>

<script>
    // Indent left 30% because container width remains same but content width changes
    var leftIndent = (30/100) * $("#categoryCont").width();
    $(".menuBlock span").css({"left":leftIndent});
</script>


A.
.menuBlock span{/*良好的跨浏览器解决方案，但无法使用%*/
位置：绝对位置；
左：70像素；
}


使用%

您需要CSS和jQuery（第一步是相同的）


A.

更改为

<div class="menuBlock" style="width:200px">
    <span>a</span>
</div>

<style>
    .menuBlock span{        /* Good cross-browser solution but cannot use % */
        position:absolute;
        left:70px;
    }
</style>

<div class="menuBlock" style="width:200px">
    <span>a</span>
</div>

<style>
    .menuBlock span{        /* Good cross-browser solution but cannot use % */
        position:absolute;  /* This one does not use 'left' */
    }
</style>

<script>
    // Indent left 30% because container width remains same but content width changes
    var leftIndent = (30/100) * $("#categoryCont").width();
    $(".menuBlock span").css({"left":leftIndent});
</script>


A.
.menuBlock span{/*良好的跨浏览器解决方案，但无法使用%*/
位置：绝对；/*此位置不使用“左”*/
}
//左缩进30%，因为容器宽度保持不变，但内容宽度发生变化
var leftIndent=（30/100）*$（“#categoryCont”）.width（）；
$（“.menuBlock span”）.css（{“left”：leftIndent}）；
我遇到了一个与我使用下面的解决方案类似的问题，我不确定这是否可以解决您想要做的事情，但它可能是

我有一个div，它可以自动调整内容大小，然后添加滚动条，缩小内部，这样表格中的文本就可以被包装起来，而不是让容器变得更宽。如果文本区域向下调整大小并出现滚动，则在下面的旧示例中可以看到不必要的效果

我丑陋的解决方案是在overflow-y:auto-div中添加一个div，这个div有display:inline块，然后再添加一个小的inline-block div，它有19像素宽（为滚动条保留）和一个像素高。当浏览器根据内容调整div的大小时，小div会出现在真实div的旁边，当滚动条出现时，小div会被压到真实div下面，而真实div会保持不变。这将导致一个像素的底部“边距”，但希望不是问题。当没有滚动条出现时，实际div旁边有19个像素的未使用空间，如问题中所述

（最外层的div正好用于复制我的设置/问题。）

旧的：


我不想这样
在文本中添加分隔符。
调整我的大小



新的：


我不想这样
在文本中添加分隔符。
调整我的大小



请阅读下面的内容来检查它是如何工作的

使用
overflow:scroll肯定是修复它最简单、最不混乱的方法。

但如果不希望在不需要滚动时显示滚动，则应使用与
视口相关的宽度（vw），而不是使用100%。由于滚动条位于视口宽度中，如果我们知道滚动条的宽度，那么我们可以使用以下公式完成任务。在这里，我将内容宽度设置为视口宽度减去滚动条的宽度（假设为15px）

您需要提供宽度为：
calc（100%-15px）
。您可以以%em等为单位提供宽度

最好的方法是，像下面这样覆盖滚动条的宽度，然后在公式中使用该宽度值进行减法

/* width */
::-webkit-scrollbar {
  width: 10px;
} 
#content {
  width: calc(100% - 10px).
}

注意：Firefox或Edge先前版本79不支持自定义滚动条。这种CSS只能在webkit浏览器中使用，所以它可能无法在IE中使用。

所以你可以用最大宽度的20px减去，因为滚动条的宽度不能超过20px。请在下面找到工作代码


.scr
.app {
  display: grid;
  grid-template-columns: 1fr 50vh 1fr;
}

.app {
  display: grid;
  grid-template-columns: calc((100vw - 50vh)/2) 50vh calc(100% - (50vh + 100vw)/2);
}

calc(100% - ((100vw - 50vh)/2) - (50vh))

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

body{
    overflow-x:hidden;
}

* {
    overflow: hidden;
}