How to make a div responsive height between header and footer with CSS only?

Question

I have an HTML page with fixed height header and footer and a element in between.

I want the element to have always the total height of the screen (excluding the h

Answer 1

* { padding: 0; margin: 0; }
body { height: 100%; width: 100%; position: absolute; }
header, footer { height: 50px; width: 100%; background: red; position: fixed; }
footer { bottom: 0; }
main { min-height: calc(100% - 100px); padding: 50px 0; overflow: auto; }

    
Hello1
    
Hello2
    
Hello3
    
Hello4
    
Hello5
    
Hello6
    
Hello7
    
Hello8
    
Hello9
    
Hello10
    
Hello11
    
Hello12
    
Hello13
    
Hello14
    
Hello15
    
Hello16
    
Hello17
    
Hello18
    
Hello19
    
Hello20