How to fix a Div to top of page with CSS only

Question

I am writing a glossary page  I have the alphabet links on the top of the page  I want to keep the top of the page  including the alphabet links  fixed  whilst the section of the page with the definitions  scrolls up down as an alphabet is clicked   My HTML looks a bit like this    lt html gt   lt head gt  lt title gt My Glossary lt  title gt  lt  head gt   lt body gt           lt div id  top  gt               lt a href   A  gt A lt  a gt                  lt a href   B  gt B lt  a gt                 lt a href   Z  gt Z lt  a gt           lt  div gt            lt div id  term-defs  gt              lt dl gt                  lt span id  A  gt  lt  span gt                  lt dt gt foo lt  dt gt                  lt dd gt This is the sound made by a fool lt  dd gt                  lt  -- and so on     -- gt              lt  dl gt           lt  div gt   lt  body gt   lt  html gt     Edit   The kind of effect I am trying to create is similar to the one here  The difference being that in the example in the link  the page scrolling is done when a user clicks on a category  In my case  I want to scroll the page when an index  i e  an alphabet  at the top of the page  is clicked

User · Answer

You can simply make the top div fixed    top   position  fixed  top  20px  left  20px

User · Answer

You can do something like this    lt html gt   lt head gt  lt title gt My Glossary lt  title gt  lt  head gt   lt body style  margin 0px   gt           lt div id  top  style  position fixed background white width 100    gt               lt a href   A  gt A lt  a gt                  lt a href   B  gt B lt  a gt                 lt a href   Z  gt Z lt  a gt           lt  div gt            lt div id  term-defs  style  padding-top 1em   gt              lt dl gt                  lt span id  A  gt  lt  span gt                  lt dt gt foo lt  dt gt                  lt dd gt This is the sound made by a fool lt  dd gt                  lt  -- and so on     - gt              lt  dl gt           lt  div gt   lt  body gt   lt  html gt    It s the position fixed that s most important  because it takes the top div from the normal page flow and fixes it at it s pre-determined position  It s also important to use the padding-top 1em because otherwise the term-defs div would start right under the top div  The background and width are there to cover the contents of the term-defs div as they scroll under the top div   Hope this helps

User · Answer

You can also use flexbox  but you d have to add a parent div that covers div top and div term-defs  So the HTML looks like this    x000D   x000D       content   x000D          width  100   x000D          height  100   x000D          display  flex  x000D          flex-direction  column  x000D        x000D   x000D       term-defs   x000D          flex-grow  1  x000D          overflow  auto  x000D         x000D       lt body gt  x000D           lt div id  content  gt  x000D               lt div id  top  gt  x000D                   lt a href   A  gt A lt  a gt    x000D                   lt a href   B  gt B lt  a gt    x000D                   lt a href   Z  gt Z lt  a gt  x000D               lt  div gt  x000D       x000D               lt div id  term-defs  gt  x000D                   lt dl gt  x000D                       lt span id  A  gt  lt  span gt  x000D                       lt dt gt foo lt  dt gt  x000D                       lt dd gt This is the sound made by a fool lt  dd gt  x000D                       lt  -- and so on     -- gt  x000D                   lt  dl gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  body gt  x000D   x000D   x000D    flex-grow ensures that the div s size is equal to the remaining size   You could do the same without flexbox  but it would be more complicated to work out the height of  term-defs  you d have to know the height of  top and use calc 100  - 999px  or set the height of  term-defs directly   With flexbox dynamic sizes of the divs are possible   One difference is that the scrollbar only appears on the term-defs div

User · Answer

Yes  there are a number of ways that you can do this   The  fastest  way would be to add CSS to the div similar to the following   term-defs   height  300px  overflow  scroll      This will force the div to be scrollable  but this might not get the best effect   Another route would be to absolute fix the position of the items at the top  you can play with this by doing something like this    top     position  fixed    top  0    left  0    z-index  999    width  100     height  23px      This will fix it to the top  on top of other content with a height of 23px   The final implementation will depend on what effect you really want

[html] How to fix a Div to top of page with CSS only

Examples related to html

Examples related to css