Scrollbar without fixed height/Dynamic height with scrollbar

Question

I have this HTML structure:

    

        
Dynamic height without scrollbar
    
         


        
      

Answer 1

Flexbox is a modern alternative that lets you do this without fixed heights or JavaScript.

Setting display: flex; flex-direction: column; on the container and flex-shrink: 0; on the header and footer divs does the trick:

HTML:

    

        
Dynamic size without scrollbar
        
Dynamic size without scrollbar
        
Dynamic size without scrollbar
  
    
    

        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
        
Dynamic size with scrollbar
    
    

        
Fixed size without scrollbar
        
Fixed size without scrollbar
    
  

CSS:

#body {
    position: absolute;
    top: 150px;
    left: 150px;
    height: 300px;
    width: 500px;
    border: black dashed 2px;
    display: flex;
    flex-direction: column;
}

#head {
    border: green solid 1px;
    flex-shrink: 0;
}

#content{
    border: red solid 1px;
    overflow-y: auto;
    /*height: 100%;*/
}

#foot {
    border: blue solid 1px;
    height: 50px;
    flex-shrink: 0;
}