html - 考虑滚动条调整 <div> 宽度

Question

我有两个 div 元素；其中一个侧面有滚动条:

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

我希望 div A 与 div B 一样宽减去滚动条的宽度。滚动条始终存在(通过显式 overflow: scroll)。 OTOH div A 高度固定，不需要滚动。我希望 div A 和 div B 的客户区对齐。

我可能会使用 JS 制作一个人工滚动条控件。不过，如果可能的话，我更喜欢基于 CSS 的原生外观解决方案。

如果我以某种方式知道滚动条的平台相关宽度是多少，我可以在图片上的 ? 位置放置一个单独的填充。

有没有办法实现这一点，至少在现代浏览器中是这样？

Answer 1

另一种可能只使用css，而且很靠谱。

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

工作起来很有魅力:http://jsfiddle.net/4gu5mkzy/1/

#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>