Header div stays at top vertical scrolling div below with scrollbar only attached to that div

Question

I have 2 main divs  the header and a scrolling list contained in a div  I want the header to always remain at the top of the page  and the scrolling list below  The scrollbar should be attached to the scrolling div and not to the whole page  i e  the scrollbar does not appear on the right of the header  just the scrolling div   This is what i m trying to achieve                                  header                                    Container Div                                                                                                                         ----------------------      scrollbar   The layout should be fluid and if the window is stretched vertically  only the container div and it s scrollbar should get longer   I don t want to position the header position  fixed  as then the scrollbar will be on the right of it instead of underneath it

User · Answer

You need to use js get better height for body div   lt html gt  lt body gt   lt div id  head  style  height 50px  width 100   font-size 50px   gt This is head lt  div gt   lt div id  body  style  height 700px  font-size 100px  white-space pre-wrap     overflow scroll   gt  This is body T h i s  i s  b  o d y  lt  div gt   lt  body gt  lt  html gt

User · Answer

Found the flex magic   Here s an example of how to do a fixed header and a scrollable content  Code    lt  DOCTYPE html gt   lt html style  height  100   gt     lt head gt       lt meta charset utf-8   gt       lt title gt Holy Grail lt  title gt       lt  -- Reset browser defaults -- gt       lt link rel  stylesheet  href  reset css  gt     lt  head gt     lt body style  display  flex  height  100   flex-direction  column  gt       lt div gt HEADER lt br  gt ------------      lt  div gt       lt div style  flex  1  overflow  auto  gt          CONTENT - START lt br  gt           lt script gt          for  var i 0   i lt 1000     i              document write   Very long content                        lt  script gt           lt br  gt CONTENT - END      lt  div gt     lt  body gt   lt  html gt      The advantage of the flex solution is that the content is independent of other parts of the layout  For example  the content doesn t need to know height of the header   For a full Holy Grail implementation  header  footer  nav  side  and content   using flex display  go to here

User · Answer

HTML     lt div class  header  gt This is the header lt  div gt   lt div class  content  gt This is the content lt  div gt                                     CSS     header       height 50px     content       position absolute      top  50px      left 0px      right 0px      bottom 0px      overflow-y scroll

User · Answer

Here is a demo  Use position fixed  top 0  left 0  so the header always stay on top     header       background red      height 50px      width 100       position fixed      top 0      left 0        scroller       height 300px       overflow scroll

[css] Header div stays at top, vertical scrolling div below with scrollbar only attached to that div

Examples related to css

Examples related to layout

Examples related to header

Examples related to scroll