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 o

Answer 1

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:

    #content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #term-defs {
        flex-grow: 1;
        overflow: auto;
    } 

    
        

            

                A |
                B |
                Z
            
    
            

                

                    
                    
foo
                    
This is the sound made by a fool
                    
                
            
        
    

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.