Question:
I have a .content div that groups all the site's content with the following css:
margin: 15px 12px;
background: #fff;
padding: 20px;
height: calc(100vh - 30px);
overflow: auto;
My body has a different background: #222 , to simulate an edge. It's 100% functional, however I want to remove that sidebar on the side of the main div. If I put an overflow: hidden; in my .content , Scroll disappears, along with the ability to scroll the page. Any jQuery or even pure CSS solution (that works outside of Chrome too)?
Answer:
On StackOverflow in English answered a similar question, which I believe solves your problem: https://stackoverflow.com/a/20447620/6762369
.div {
background-color: red;
position: relative;
height: 214px;
overflow: hidden;
width: 452px;
margin: 0px auto;
}
#inner{
width: 100%;
overflow: auto;
height: 100%;
padding-right: 15px;
}
In this question they left an example in fiddle: http://jsfiddle.net/sp95S/1/