Scroll part of content in fixed position container

Question

I have a position  fixed div in a layout  as a sidebar  I ve been asked to have part of it s content stay fixed to the top of it  internally   and the rest to scroll if it overflows the bottom of the div   I ve had a look at this answer  however the solution presented there doesn t work with position  fixed or position  absolute containers  which is a pain   I ve made a JSFiddle demonstration of my problem here  The large amount of text should ideally scroll  instead of overflowing into the bottom of the page  The height of the header can vary with content  and may be animated    x000D   x000D  body   x000D      background   eee  x000D      font-family  sans-serif  x000D    x000D   x000D  div sidebar   x000D      padding  10px  x000D      border  1px solid  ccc  x000D      background   fff  x000D      position  fixed  x000D      top  10px  x000D      left  10px  x000D      bottom  10px  x000D      width  280px  x000D    x000D  div fixed   x000D      background   76a7dc  x000D      padding-bottom  10px  x000D      color   fff  x000D    x000D   x000D  div scrollable   x000D      overlow-y  scroll  x000D    x000D   lt div class  sidebar  gt  x000D       lt div id  fixed  gt  x000D          Fixed content here  can be of varying height using jQuery   animate           x000D       lt  div gt  x000D   x000D       lt div id  scrollable  gt  x000D          Scrolling content lt br gt  lt br gt  x000D          Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod x000D  tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  x000D  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo x000D  consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse x000D  cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non x000D  proident  sunt in culpa qui officia deserunt mollit anim id est laborum  x000D           x000D          Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod x000D  tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  x000D  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo x000D  consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse x000D  cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non x000D  proident  sunt in culpa qui officia deserunt mollit anim id est laborum  x000D          Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod x000D  tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  x000D  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo x000D  consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse x000D  cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non x000D  proident  sunt in culpa qui officia deserunt mollit anim id est laborum  x000D          Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod x000D  tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  x000D  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo x000D  consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse x000D  cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non x000D  proident  sunt in culpa qui officia deserunt mollit anim id est laborum  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Without a fixed header  I can simply add overflow-y  scroll to div sidebar and I can happily scroll all it s content if it overflows the bottom of the container  However  I m running into issues with having a fixed  variable height header at the top of the sidebar  and having any content underneath that scroll if it s too long to fit into the container    div sidebar must stay position  fixed  and I would very much like to do this without any hacks  as well as make it as cross browser as possible  I ve attempted various things  but none of them work  and I m unsure as to what to try from here   How can I make a div inside a position  fixed container scroll only in the Y direction when it s content overflows the containing div  with a fixed header of varying  indeterminate height  I d very much like to stay away from JS  but if I have to use it I will

User · Accepted Answer

It seems to work if you use  div scrollable       overflow-y  scroll      height  100       and add padding-bottom  60px to div sidebar    For example  http   jsfiddle net AKL35 6   However  I am unsure why it must be 60px   Also  you missed the f from overflow-y  scroll

User · Answer

What worked for me    div scrollable       overflow-y  scroll      max-height  100vh

User · Answer

I changed scrollable div to be with absolute position  and everything works for me  div sidebar       overflow  hidden      background-color  green      padding  5px      position  fixed      right  20px      width  40       top  30px      padding  20px      bottom  30     div fixed       background   76a7dc      color   fff      height  30px     div scrollable       overflow-y  scroll      background  lightblue       position  absolute      top 55px       left 20px      right 20px      bottom 10px      DEMO with two scrollable divs

User · Answer

Set the scrollable div to have a max-size and add overflow-y  scroll  to it s properties   Edit  trying to get the jsfiddle to work  but it s not scrolling properly  This will take some time to figure out

User · Answer

Actually this is better way to do that  If height  100  is used  the content goes off the border  but when it is 95  everything is in order   div scrollable       overflow-y  scroll      height  95

[css] Scroll part of content in fixed position container

Examples related to css

Examples related to overflow