Overflow Scroll css is not working in the div

Question

I am looking for CSS Javascript solution for my HTML page scrolling issue   I have three divs that contain a div  a header and a wrapper div    I need a vertical scrollbar in the wrapper div  height should be auto or 100  based on the content   The header should be fixed  and I don t want overall scrollbar so I have given overflow hidden in the body tag   I need vertical scrollbar in my wrapper div  How can I fix this   HTML   lt div id  container  gt        lt div class  header  gt  lt  div gt        lt div class  wrapper  gt           lt p gt Lorem ipsum dolor sit amet  consectetuer adipiscing elit  Vivamus porta tortor sed metus  Nam pretium  Sed tempor  Integer ullamcorper  odio quis porttitor sagittis  nisl erat tincidunt massa  eu eleifend eros nibh sollicitudin est  Nulla dignissim  Mauris sollicitudin  arcu id sagittis placerat  tellus mauris egestas felis  eget interdum mi nibh vel lorem  Aliquam egestas hendrerit massa  Suspendisse sed nunc et lacus feugiat hendrerit  Nam cursus euismod augue  Aenean vehicula nisl eu quam luctus adipiscing  Nunc consequat justo pretium orci  Mauris hendrerit fermentum massa  Aenean consectetuer est ut arcu  Aliquam nisl massa  blandit at  accumsan sed  porta vel  metus  Duis fringilla quam ut eros  lt  p gt           lt  -- Lots more paragraphs-- gt       lt  div gt    lt  div gt    CSS  body  margin 0  padding 0  overflow hidden  height 100    container   width 1000px  margin 0 auto    header   width 1000px  height 30px  background-color  dadada    wrapper  width 1000px  overflow scroll  position relative     Please refer to this JS Fiddle

User · Answer

For Angular2   Material2   Sidenav  you ll need to do the following    ngAfterViewInit        this element nativeElement getElementsByClassName  md-sidenav-content   0  style overflow    hidden

User · Answer

Try this for a vertical scrollbar   overflow-y scroll

User · Answer

You didn t gave the div a height  So it will automatically stretch when more content is added  Give it a fix-height and the scroll bars will show up

User · Answer

I edited your  Fiddle  html  body  margin 0  padding 0  overflow hidden  height 100     header   margin  0 auto  width 500px  height 30px  background-color  dadada    wrapper  margin  0 auto  width 500px  overflow scroll  height  100      Giving the html-tag a 100  height is the solution  I also deleted the container div  You don t need it when your layout stays like this

User · Answer

If you add height in  wrapper class then your scroll is working  without height scroll is not working   Try this  http   jsfiddle net ZcrFr 3   CSS    wrapper     position  relative    overflow  scroll    width  1000px    height  800px

User · Answer

You are missing the height CSS property   Adding it you will notice that scroll bar will appear    wrapper          width  1000px      width 600px       overflow-y scroll       position relative      height  300px      JSFIDDLE  From documentation   overflow-y     The overflow-y CSS property specifies whether to clip content  render a scroll bar  or display overflow content of a block-level element  when it overflows at the top and bottom edges

User · Answer

If you set a static height for your header  you can use that in a calculation for the size of your wrapper   http   jsfiddle net ske5Lqyv 5   Using your example code  you can add this CSS   html  body     margin  0px    padding  0px    height  100       container     height  100       header     height  64px    background-color  lightblue      wrapper     height  calc 100  - 64px     overflow-y  auto      Or  you can use flexbox for a more dynamic approach http   jsfiddle net 19zbs7je 3    lt div id  container  gt     lt div class  section  gt       lt div class  header  gt Heading lt  div gt       lt div class  wrapper  gt         lt p gt Large Text lt  p gt       lt  div gt     lt  div gt   lt  div gt   html  body     margin  0px    padding  0px    height  100       container     display  flex    flex-direction  column    height  100       section     flex-grow  1    display  flex    flex-direction  column    min-height  0      header     height  64px    background-color  lightblue    flex-shrink  0      wrapper     flex-grow  1    overflow  auto    min-height  100        And if you d like to get even fancier  take a look at my response to this question https   stackoverflow com a 52416148 1513083

User · Answer

in my case  only height  100vh fix the problem with the expected behavior

User · Answer

The solution is to add height 100   to all the parent elements of your  wrapper-div as well  So  html      height  100      body       margin 0      padding 0      overflow hidden      height 100       container      width 1000px      margin 0 auto      height 100

User · Answer

I wanted to comment on  Ionica Bizau  but I don t have enough reputation  To give a reply to your question about javascript code  What you need to do is get the parent s element height  minus any elements that take up space  and apply that to the child elements   function wrapperHeight        var height     window  outerHeight   -     header   outerHeight true           wrapper   css   max-height  height  px               Note window could be replaced by   container  if that one has no floated children or has a fix to get the correct height calculated  This solution uses jQuery

[css] Overflow Scroll css is not working in the div

Examples related to css