CSS div not taking height till bottom of page and unnecessary scoll is enabled [duplicate]

<html>
    <head>
        <style>   
            html,body,#root,.app-container {
                height:100%;
            }  
            .navBar {  
                height:50px;  
            }
        </style>
    </head>
    <body>
        <div id="root">
            <div className="navBar">
            </div>
            <div className="app-container">
            </div>  
        </div>
    </body>
</html>

Despite root is having 100%, scroll is coming initially when you visit to page first time.
I have tried by making
root height as 100% and app-container height to calc(100%-50px) In this case scroll is still appearing
root height as 100% and app-container height to 96% In this case scroll is appearing and
app-container is not taking entire height of page i.e., it is not taking height till bottom which is not correct
root height as 96% and app-container height to 100% in this case scroll is disappearing but
app-container is not taking entire height of page i.e., it is not taking height till bottom which is not correct

please let me know how to remove unwanted scroll and app-container to take page height till bottom correctly

Source: New feed
Source Url CSS div not taking height till bottom of page and unnecessary scoll is enabled [duplicate]