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>

Answer 2

据我所知，只有CSS不会这样做，除非你适应HTML并做出一点妥协。

不是像素完美的解决方案，但由于scollbar在浏览器之间不一样......

<强> DEMO

HTML测试：

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

CSS测试：

.ab {
  width:200px;
  background-color:gray;
}
.sc {
  width:200px;
  padding-right:1.1em;
  height:100px;
  overflow:auto;
}
.sc .ab { 
  height:200px;/*demo purpose */
}

Answer 3

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

http://jsfiddle.net/mLjkr9ce/1/

HTML：

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

CSS：

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

JS：

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

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

然后将此值设置为填充。

<强> BUT

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

请参阅this article with the Test Results

Chrome v34 17像素

Internet Explorer v11 17像素

Internet Explorer v10 17像素

Firefox v29 17像素

Firefox v28 17像素

所以基本上，我相信17px的简单padding可能就足够了，尽管该文章指出使用20px基础是一种常见的做法。

调整<div>宽度，将滚动条考虑在内</div>

3 个答案: