js sets 3 divs to cover the interface vertically (head + content + bottom)

1. Requirements: 3 div vertical layout

　　

 

Two: Solutions

　　1. Set a fixed height for the header and footer, and set it when the document loads

　　

 $("#header").height(100);
 $("#footer").height(200);

　　2. Set the height of the container

function rePageSize(){
    var Height = document.documentElement.clientHeight;
    $("#header").height(100);
    $( "#footer").height(200 );
     // Set the minimum height 
    if ($("#container").height() < (Height-100-200 )){
        $("#container").height(Height-100-200);
    }
}

It should be noted that: you need to set the width of the div.

　　3. When the browser size changes, repeat the second step

window.onresize = rePageSize;

This method came up by myself, there should be a better method (except for jquery without importing other frameworks), please let me know