Javascript-html highly Adaptive

Without JavaScript, absolute positioning is not used, no overflow:hiddenHide the overflow part, how to make the height of the div adaptive?
You do not need to consider a low-version browser.

                
  
           Document                        top        middle        bottom        

such as the above middle, how to make its height to fill the screen remaining space?

Reply content:

How to make the height of the div adaptive without using JavaScript, without absolute positioning, without overflow:hidden hiding the overflow part?
You do not need to consider a low-version browser.

                
  
           Document                        top        middle        bottom        

such as the above middle, how to make its height to fill the screen remaining space?

Using Flex layouts

    
  
       Document        top    middle    bottom

Using the Table-row layout

    
  
       Document        top    middle    bottom

