Move Vertical Scroll From Page To Inner Div
I have a page without vertical scroll on
Solution 1:
I think you are looking for a flex-box solution. It requires some love and care to get it to work on all modern browsers so take a look at caniuse.com for info about this.
It is worth pointing out that this does not work with old browser version at all and that a JavaScript substitute will be required if support is essential.
html,body{
height:100%;
margin:0;
}
#wrapper{
height:100%;
display:flex;
flex-direction:column;
}
#header{
height:50px;
background-color:red;
}
#content{
flex:1;
display: flex;
min-height: 0; // FF FIX
background-color:yellow;
}
.scrollable{
width: 50%;
overflow-y:auto;
float:left;
display:inline-block;
}
#footer{
background-color:green;
}<divid="wrapper"><divid="header">
Header
</div><divid="content"><divclass="scrollable"><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div><divclass="scrollable"><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div></div><divid="footer">
Content
</div></div>
Post a Comment for "Move Vertical Scroll From Page To Inner Div"