Just a test which is working fine.
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
OR
Using `Position: absolute,`
#parent{
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
Just a test which is working fine.
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
**[Working Fiddle][1]**
### JavaScript:
Since, the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do `Element.offsetWidth - Element.clientWidth`, the exact scrollbar width will show up.
**[JavaScript Working Fiddle][2]**
##or
Using `Position: absolute`,
#parent{
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
**[Working Fiddle][3]**
[**JavaScript Working Fiddle**][4]
###Info:
Based on this answer, I created a [simple scroll plugin][5]. I hope this will help someone.
[1]: http://jsfiddle.net/5GCsJ/954/
[2]: http://jsfiddle.net/5GCsJ/4713/
[3]: http://jsfiddle.net/5GCsJ/2125/
[4]: http://jsfiddle.net/5GCsJ/4714/
[5]: https://github.com/kamlekar/slim-scroll
