Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Move Vertical Scroll From Page To Inner Div

Post a Comment
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>

You may like these posts

Post a Comment for "Move Vertical Scroll From Page To Inner Div"