Html 调整a<；部门>；考虑滚动条的宽度

我有两个

div

元素；其中一个侧面有滚动条：

+-------------+ ?
|  div A      | ?
+-------------+ ?
|             |^|
|             | |
|             | |
|   div B     |=|
|             | |
+-------------|v|

我希望

diva

的宽度正好等于

divb

减去滚动条的宽度。滚动条始终存在（通过显式

溢出：滚动
）。OTOH
div A
具有固定高度，不需要滚动。我希望将
div A
和
div B
的客户端区域对齐

我可能会使用JS制作一个人工滚动条控件。如果可能的话，我更喜欢基于CSS的、看起来像本地人的解决方案

如果我知道滚动条与平台相关的宽度，我可以在图片上的
？
位置放置一块单独的填充物

至少在现代浏览器中，有没有办法做到这一点呢？
据我所知，只有CSS才能做到这一点，除非您对HTML进行调整并做出一些妥协

不是像素完美的解决方案但由于从一个浏览器到另一个浏览器的scollbar并不相同


HTML测试：

<div class="ab">A</div>
<div class="sc">
  <div class="ab">B</div>
</div>

您可以创建一个Javascript简单函数来计算滚动条的宽度。只需设置一个div width
overflow:scroll
和一个内部div，然后减去它们的
offsetWidth
：


HTML:

JS:

然后将此值设置为填充

但是

这可能毫无意义，因为几乎所有（如果不是所有）主流浏览器都有一个17px宽的滚动条：

看

Chromev34 17像素

Internet Explorerv11 17像素

Internet Explorerv10 17像素

Firefoxv29 17像素

Firefoxv28 17像素

因此，基本上，我相信一个简单的17px的
填充
就足够了，尽管文章指出使用20px是一种常见的做法。
另一种可能只使用css，而且非常可靠

在顶部div上，创建一个内部div来保存内容，并在
元素之后创建一个隐藏的伪
：来生成滚动条的宽度。我使用了
display:table
aligment来保持内联，但其他技术也可以：

工作起来很有魅力：

#顶部{
宽度：100%；
高度：100px；
显示：表格；
}
#顶部：之后{
显示：表格单元格；
内容：“；
溢出y：滚动；
可见性：隐藏；
}
.内部{
显示：表格单元格；
背景：黄色；
}
你真的应该尝试一下，如果桌面上所有3种主要浏览器的宽度都是固定的，那么你可能会很安全。如果是js解决方案，会有问题吗？你可以使用一个额外的元素来保持滚动条，并使用一个安全的填充值将其保留足够远：@LcSalazar:js解决方案就可以了，CSS会特别好，有OSX和默认的Ubuntu设置，这两种设置在相关页面的目标读者中都非常普遍。在这两种情况下，滚动条最初都是一个非常窄的条带，鼠标上方会弹出一个滚动条控件。
.ab {
  width:200px;
  background-color:gray;
}
.sc {
  width:200px;
  padding-right:1.1em;
  height:100px;
  overflow:auto;
}
.sc .ab { 
  height:200px;/*demo purpose */
}

<div id='outer-div'>
    <div id='inner-div'></div>
</div>

#outer-div {
    width:100%;
    position: absolute;
    overflow-y: scroll;
    visibility: hidden;
}

var ow = document.getElementById("outer-div").offsetWidth;
var iw = document.getElementById("inner-div").offsetWidth;

alert(ow - iw); //Scrollbar's rendered width

#top {
    width: 100%;
    height: 100px;
    display: table;
}

#top:after {
    display: table-cell;
    content: "";
    overflow-y: scroll;
    visibility: hidden;
}

.inner {
    display: table-cell;
    background: yellow;
}

<div id="top">
    <div class="inner"><!-- content --></div>
</div>