Adjust the width of the <div> based on the scrollbar

Question

I have two elements div; one of them with side scroll bar:

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

I want it to div Abe as wide as div Bminus the width of its scroll bar. A scroll bar is always present (using explicit overflow: scroll). OTOH div Ahas a fixed height and does not need to scroll. I want the client area div Aand div Baligned.

I could do artificial scroll control using JS. If possible, I would prefer a CSS-based open source solution.

I could place a separate fragment of the gasket, where ?in the picture, if I somehow knew that the scrollbar width depends on the platform.

, , ?

Answer 1

css, .

div div - :after . a display: table aligment, , :

: 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 rendered width

.

, ( ) 17 :

.

Chrome v34 17

Internet Explorer v11 17

Internet Explorer v10 17

Firefox v29 17

Firefox v28 17

Basically, I believe that a simple paddingof 17px might be enough, although the article says that this is the usual practice of using a 20px framework.